/* ═══════════════════════════════════════════════════════════════════════════
   CASCA CANÔNICA DO SITE PÚBLICO · navbar + rodapé
   ---------------------------------------------------------------------------
   Par de public/site/parciais/navbar.html e rodape.html, injetados no servidor
   por backend/middleware/casca-publica.js. Uma fonte de marcação, uma fonte de
   estilo: é isto que substitui os quatro cabeçalhos legados (.top, .nav,
   .ds-topbar, .topo) que o site tinha.

   Padrão aprovado pelo dono (12/08/2026), medido na página de Atendimento:
   navbar de 64px no roxo da marca, contêiner de 1120px, rodapé de 4 colunas.
   Os valores vivem em dw-tokens.css, aqui só se consomem.

   Sem alternador de tema: a decisão de 12/08 tirou o sol/lua do site
   comercial, a página usa o tema oficial fixo da marca.
   ═════════════════════════════════════════════════════════════════════════ */

.dw-wrap { max-width: var(--dw-wrap); margin: 0 auto; padding: 0 var(--dw-gutter); }

/* ── Pular para o conteúdo: só aparece com foco de teclado ─────────────── */
.dw-pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--dw-brand-700); font-weight: 700; font-size: .9rem;
  padding: 12px 18px; border-radius: 0 0 10px 0;
}
.dw-pular:focus { left: 0; }

/* ── NAVBAR ────────────────────────────────────────────────────────────── */
.dw-nav { background: var(--dw-brand); position: sticky; top: 0; z-index: 50; }
.dw-nav .dw-wrap { min-height: var(--dw-navbar-h); display: flex; align-items: center; gap: 28px; }

.dw-marca {
  display: flex; align-items: center; gap: 9px; flex: none;
  color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  text-decoration: none;
}
.dw-logo {
  width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: .8rem;
}

.dw-menu { display: flex; gap: 22px; margin-right: auto; }
.dw-menu a {
  color: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap;
  padding: 4px 0; text-decoration: none;
}
.dw-menu a:hover { color: rgba(255,255,255,.78); }

.dw-acoes { display: flex; align-items: center; gap: 16px; flex: none; }
.dw-entrar { color: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.dw-cta {
  background: #fff; color: var(--dw-brand); font-weight: 700; font-size: .9rem;
  padding: 10px 16px; border-radius: var(--dw-r-botao); white-space: nowrap; text-decoration: none;
}
.dw-cta:hover { background: var(--dw-brand-claro); }

.dw-burger { display: none; }        /* só no celular; ver o bloco abaixo */
.dw-menu-entrar { display: none; }   /* no desktop quem mostra é a barra */
.dw-cta-curto { display: none; }     /* no desktop vale o rótulo canônico */

.dw-nav a:focus-visible, .dw-rodape a:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px;
}
.dw-rodape a:focus-visible { outline-color: var(--dw-brand); }

/* Celular: a navbar vira duas linhas e o menu rola na horizontal. Sem
   hambúrguer e sem JS, nada para abrir, nada para quebrar, e nenhum link
   escondido do visitante. */
/* ── CELULAR: marca à esquerda, "Agendar" e ícone à direita, links no painel ──
   Decisão do dono (13/08/2026). A faixa rolável anterior escondia links: os
   seis itens somam 451px e o espaço vai de 272px (320) a 382px (430). Num
   painel vertical nada fica cortado e nada depende de descobrir que rola. */
@media (max-width: 1024px) {
  /* wrap: sem ele o painel não ganha a própria linha e fica espremido
     numa coluna à direita da marca. */
  .dw-nav .dw-wrap { flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .dw-acoes { margin-left: auto; gap: 10px; }
  .dw-entrar { display: none; }          /* vive dentro do painel */
  .dw-cta { padding: 10px 14px; font-size: .88rem; flex: none; }
  .dw-cta-curto { display: inline; }
  .dw-cta-longo { display: none; }

  .dw-burger {
    display: grid; place-content: center; gap: 5px; flex: none;
    width: 42px; height: 42px; padding: 0;
    background: rgba(255,255,255,.14); border: 0; border-radius: 10px;
    cursor: pointer;
  }
  .dw-burger-b {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: #fff; transition: transform .18s ease, opacity .12s ease;
  }
  /* As três barras viram X quando aberto, o mesmo botão fecha. */
  .dw-aberto .dw-burger-b:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .dw-aberto .dw-burger-b:nth-child(2) { opacity: 0; }
  .dw-aberto .dw-burger-b:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* O painel: fechado ocupa altura zero, sem sumir da árvore de acessibilidade
     por display:none, o que preserva os links para quem lê o HTML. */
  .dw-menu {
    order: 3; width: 100%; margin-right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .22s ease, visibility 0s linear .22s;
  }
  .dw-aberto .dw-menu {
    max-height: 70vh; overflow-y: auto; visibility: visible;
    transition: max-height .22s ease, visibility 0s;
    border-top: 1px solid rgba(255,255,255,.18); margin-top: 4px; padding-top: 4px;
  }
  .dw-menu a {
    padding: 13px 2px; font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .dw-menu a:last-child { border-bottom: 0; }

  /* Com o painel aberto a página por baixo não rola. */
  html.dw-travado, html.dw-travado body { overflow: hidden; }
  .dw-menu .dw-menu-entrar { display: block; font-weight: 700; }
}

/* ── RODAPÉ ────────────────────────────────────────────────────────────── */
.dw-rodape { background: #fff; border-top: 1px solid var(--dw-line); padding: 48px 0 0; }
.dw-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px 28px; }
.dw-rodape h4 {
  font-family: var(--dw-fonte-mono);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dw-t-500); margin: 0 0 12px; font-weight: 700;
}
.dw-rodape a { display: block; font-size: .9rem; color: var(--dw-t-600); padding: 4px 0; text-decoration: none; }
.dw-rodape a:hover { color: var(--dw-t-900); }
.dw-fmarca { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.1rem; color: var(--dw-t-900); }
.dw-logo--f { background: linear-gradient(135deg, var(--dw-logo-de), var(--dw-logo-ate)); color: #fff; font-weight: 800; }
.dw-emp { margin: 12px 0 0; font-size: .9rem; color: var(--dw-t-600); max-width: 34ch; line-height: 1.6; }
.dw-emp + .dw-emp { margin-top: 10px; font-size: .85rem; color: var(--dw-t-500); }
.dw-fim {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--dw-line); margin-top: 34px; padding: 20px 0;
  font-size: .85rem; color: var(--dw-t-500);
}

@media (max-width: 860px) { .dw-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dw-cols { grid-template-columns: 1fr; gap: 26px; } }

/* ── FUNDO DA PÁGINA ─────────────────────────────────────────────────────
   Ordem do dono (13/08/2026): "1 cabeçalho e 1 rodapé completo". A navbar e
   o rodapé iguais não bastavam, cada página trazia o seu próprio fundo
   (#FFFFFF, #FBFAF7, #F8FAFC, e duas escuras), e o visitante via o mesmo
   cabeçalho sobre papéis diferentes. Continuava parecendo outro site.

   Esta folha é carregada DEPOIS do <style> da página, então vence o empate
   de especificidade sem precisar de !important. Uma seção que queira outro
   tom continua podendo pintar a si mesma, o que fica travado é o papel. */
body { background: var(--dw-page); }