/* ==========================================================================
   DESMOB JÁ — cabeçalho e modal de acesso
   --------------------------------------------------------------------------
   Esta folha convive com o CSS do Elementor, que volta a servir o conteúdo da
   home. Por isso TUDO aqui é escopado por #djTopo / #djEntrar: o kit do tema
   tem regras de TIPO (`header{...}`, `*{...}`) que alcançam tag nua, e foi
   assim que os cabeçalhos do kanban sumiram uma vez. Seletor por id ganha de
   seletor por tipo sem precisar de !important espalhado.

   As duas cores são as do logo: oliva #3a3d31 e dourado #d19548.
   ========================================================================== */

#djTopo{
  --dj-oliva:#3A3D31; --dj-oliva-900:#23261E; --dj-ouro:#D19548; --dj-ouro-esc:#A2702F;
  --dj-linha:#E2DED2; --dj-areia:#F7F5EF; --dj-ink:#23261E; --dj-ink-2:#55594A; --dj-ink-3:#7C8071;
  --dj-sans:'Aptos','Segoe UI Variable Text','Segoe UI',Inter,system-ui,-apple-system,sans-serif;

  position:sticky !important; top:0 !important; left:auto !important; right:auto !important;
  bottom:auto !important; width:100% !important; z-index:9000 !important;
  background:rgba(255,255,255,.96) !important; backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--dj-linha) !important; box-shadow:none !important;
  font-family:var(--dj-sans) !important; margin:0 !important; padding:0 !important;
  display:block !important; transform:none !important;
}
#djTopo *{box-sizing:border-box; font-family:inherit}
#djTopo .dj-barra{
  width:min(100% - 40px, 1180px); margin:0 auto; display:flex; align-items:center;
  gap:16px; min-height:74px;
}
#djTopo a{text-decoration:none}
#djTopo .dj-logo{display:flex; align-items:center; flex:none; padding:0; border:0}
#djTopo .dj-logo img{height:34px; width:auto; display:block; max-width:none}
#djTopo .dj-nav{display:none; margin-left:auto; gap:2px; align-items:center}
#djTopo .dj-nav a{
  padding:9px 13px; border-radius:7px; font-size:.94rem; font-weight:500;
  color:var(--dj-ink-2); white-space:nowrap; line-height:1.2;
}
#djTopo .dj-nav a:hover{background:var(--dj-areia); color:var(--dj-ink)}
#djTopo .dj-acoes{display:flex; align-items:center; gap:10px; margin-left:auto}
@media (min-width:1000px){
  #djTopo .dj-nav{display:flex}
  #djTopo .dj-acoes{margin-left:18px}
}

#djTopo .dj-btn,
#djEntrar .dj-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:8px; border:1px solid transparent;
  font:inherit; font-size:.9rem; font-weight:600; line-height:1.1; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s; text-transform:none;
  letter-spacing:0; box-shadow:none;
}
#djTopo .dj-btn--ouro,
#djEntrar .dj-btn--ouro{background:var(--dj-ouro); color:#2A2113; border-color:var(--dj-ouro)}
#djTopo .dj-btn--ouro:hover,
#djEntrar .dj-btn--ouro:hover{background:var(--dj-ouro-esc); border-color:var(--dj-ouro-esc); color:#FFF}
#djTopo .dj-btn--linha{background:transparent; color:var(--dj-ink); border-color:var(--dj-linha)}
#djTopo .dj-btn--linha:hover{border-color:var(--dj-oliva); background:var(--dj-areia)}

#djTopo .dj-hamb{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--dj-linha); border-radius:8px; background:#FFF; cursor:pointer; color:var(--dj-ink);
}
@media (min-width:1000px){ #djTopo .dj-hamb-wrap{display:none} }
#djTopo details{position:relative}
#djTopo summary{list-style:none; cursor:pointer}
#djTopo summary::-webkit-details-marker{display:none}
#djTopo .dj-gaveta{
  position:absolute; right:0; top:calc(100% + 10px); z-index:9100; min-width:min(80vw,290px);
  background:#FFF; border:1px solid var(--dj-linha); border-radius:10px;
  box-shadow:0 12px 34px -14px rgba(35,38,30,.4); padding:8px; display:flex; flex-direction:column; gap:2px;
}
#djTopo .dj-gaveta a{
  padding:10px 12px; border-radius:7px; font-size:.93rem; font-weight:560; color:var(--dj-ink);
}
#djTopo .dj-gaveta a:hover{background:var(--dj-areia)}

@media (max-width:640px){
  #djTopo .dj-barra{gap:10px; min-height:66px; width:min(100% - 28px, 1180px)}
  #djTopo .dj-logo img{height:27px}
  #djTopo .dj-btn{padding:9px 13px; font-size:.86rem}
  #djTopo .dj-acoes > .dj-btn--linha{display:none}
}

/* ==========================================================================
   Modal de acesso — e-mail, senha e o portal, tudo à vista
   --------------------------------------------------------------------------
   Centralização: .dj-ov SEM align-items e .dj-modal com margin:auto. Trocar por
   flex+align-items:center deixa o topo do modal inalcançável em tela baixa —
   já aconteceu neste projeto.
   ========================================================================== */
#djEntrar{
  --dj-ouro:#D19548; --dj-ouro-esc:#A2702F; --dj-linha:#E2DED2; --dj-areia:#F7F5EF;
  --dj-ink:#23261E; --dj-ink-2:#55594A; --dj-ink-3:#7C8071;
  --dj-sans:'Aptos','Segoe UI Variable Text','Segoe UI',Inter,system-ui,-apple-system,sans-serif;
  position:fixed; inset:0; z-index:9500; display:none; overflow:auto;
  background:rgba(35,38,30,.62); padding:20px; font-family:var(--dj-sans);
}
#djEntrar.aberto{display:block}
#djEntrar *{box-sizing:border-box; font-family:inherit}
#djEntrar .dj-modal{
  margin:auto; background:#FFF; border-radius:14px; width:min(100%,430px);
  padding:clamp(24px,3vw,32px); box-shadow:0 24px 60px -20px rgba(35,38,30,.55);
  position:relative; color:var(--dj-ink);
}
#djEntrar h2{
  font-size:1.42rem; margin:0 0 6px; font-weight:640; letter-spacing:-.02em;
  color:var(--dj-ink); line-height:1.2;
}
#djEntrar .dj-sub{font-size:.92rem; color:var(--dj-ink-2); margin:0 0 20px; line-height:1.5}
#djEntrar .dj-x{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:8px;
  border:1px solid var(--dj-linha); background:#FFF; color:var(--dj-ink-2); cursor:pointer;
  display:grid; place-items:center; padding:0;
}
#djEntrar .dj-x:hover{background:var(--dj-areia); color:var(--dj-ink)}
#djEntrar .dj-campo{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
#djEntrar label{
  font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dj-ink-3); margin:0;
}
#djEntrar input, #djEntrar select{
  font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--dj-linha);
  border-radius:9px; background:#FBFAF7; color:var(--dj-ink); width:100%; margin:0;
  -webkit-appearance:none; appearance:none;
}
#djEntrar select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355594A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
#djEntrar input:focus, #djEntrar select:focus{
  outline:none; border-color:var(--dj-ouro); box-shadow:0 0 0 3px rgba(209,149,72,.18);
}
#djEntrar .dj-dica{font-size:.78rem; color:var(--dj-ink-3); margin:-8px 0 14px}
#djEntrar #djSubmit{width:100%; margin-top:4px; padding:13px; font-size:.95rem}
#djEntrar #djSubmit[disabled]{opacity:.65; cursor:progress}
#djEntrar .dj-msg{
  display:none; margin:14px 0 0; font-size:.9rem; border-radius:9px; padding:11px 13px; line-height:1.45;
}
#djEntrar .dj-msg.err{display:block; background:#FBEDEB; border:1px solid #EBC9C4; color:#8A322A}
#djEntrar .dj-msg.ok{display:block; background:#E9F3EC; border:1px solid #BFDCC8; color:#245C38}

/* link de pular, só para teclado */
#djPular{
  position:absolute; left:-9999px; top:0; z-index:9600; background:#FFF;
  border:1px solid #E2DED2; border-radius:8px; padding:10px 16px; font-weight:600;
  text-decoration:none; color:#23261E;
}
#djPular:focus{left:12px; top:12px}

/* --------------------------------------------------------------------------
   O carrossel do Elementor deixa ~20px de sobra à direita perto de 820px de
   largura. Medido: o site ANTIGO tem exatamente o mesmo (janela 820, documento
   840) — não é regressão da migração. Como nada nesta página precisa rolar de
   lado, corta no body. Só no body: `overflow-x` no html quebraria o sticky do
   cabeçalho em alguns navegadores.
   -------------------------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip}
/* `clip` em vez de `hidden`: hidden cria um contexto de rolagem e quebraria o
   position:sticky do cabecalho; clip corta sem criar contexto. */

/* --------------------------------------------------------------------------
   ANCORAS DO MENU
   O #djTopo e sticky com 74px de altura: sem isto o link "#sobre" para com o
   titulo da secao EMBAIXO da barra, e a pessoa le como "nao funcionou".
   scroll-margin-top desconta a barra do ponto de parada.
   O scroll-behavior mora aqui e nao no dj-site.css porque a home NAO carrega
   aquela folha (ela serve o catalogo).
   -------------------------------------------------------------------------- */
#como-ajudamos,#processo,#sobre,#contato{scroll-margin-top:86px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }