/* Território local. O Claude Design nunca escreve aqui.
   Carregado depois do <style> da página assada, então vence em especificidade
   igual. Regra: nada de CSS local dentro do index.html — sempre neste arquivo. */

/* O design estiliza tudo por style="" inline, e um display inline vence o
   [hidden] do navegador: sem isto o form escondido no 200 continuaria na tela. */
[hidden] { display: none !important; }

/* Correções de layout sobre o design. Cada uma é para sair quando o design
   corrigir na origem (ATUALIZAR.md → "Pendências no Claude Design"). */

/* O aviso legal do rodapé tem `width: 947px` fixo (sobra de um redimensiona-
   mento no editor): no celular a página inteira rolava para o lado. */
footer p { width: auto !important; height: auto !important; }

/* O cabeçalho é sticky: sem isto o menu leva o título da seção para baixo dele. */
section[id] { scroll-margin-top: 72px; }

/* No celular os oito itens do menu quebravam em três linhas, e o cabeçalho
   sticky comia ~200px da tela. Uma linha que rola para o lado. */
@media (max-width: 640px) {
  header nav {
    flex-wrap: nowrap !important; overflow-x: auto; width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { white-space: nowrap; flex: 0 0 auto; }
  section[id] { scroll-margin-top: 112px; }
}

/* Consentimento (local.js), dentro do cartão branco do formulário. */
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-body); font-size: var(--text-body-sm);
  line-height: 1.5; color: var(--text-muted);
}
.consent input { width: 16px; height: 16px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--brand-primary); }

/* Status do formulário. */
.form-status:empty { display: none; }
.form-status {
  margin: 0; padding: 11px 14px; border-radius: var(--radius-md);
  font-size: var(--text-body-sm); line-height: 1.5;
  border: 1px solid var(--border-default);
}
.form-status[data-tipo="erro"] {
  color: var(--rgcc-critical-500); background: var(--rgcc-critical-050);
  border-color: color-mix(in srgb, var(--rgcc-critical-500) 35%, transparent);
}
#leadForm button[disabled] { opacity: .62; cursor: progress; }

/* Botão flutuante do WhatsApp (local.js). Mesmo visual das outras landings. */
.wafab {
  position: fixed; z-index: 60; right: 22px; bottom: 22px;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 22px rgba(4,40,24,.34), 0 2px 6px rgba(4,40,24,.24);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wafab:hover { background: #1EBE5B; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(4,40,24,.38); }
.wafab svg { width: 31px; height: 31px; }
@media (max-width: 640px) {
  .wafab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wafab svg { width: 28px; height: 28px; }
}

/* Aviso de cookies do GA4 (local.js). Só aparece com um GA_ID real. Embaixo
   à esquerda no desktop, para não cobrir o botão do WhatsApp; no celular ocupa
   a largura e empurra o botão para cima. */
.cookie-aviso {
  position: fixed; z-index: 70; left: 16px; bottom: 16px;
  max-width: 420px; padding: 16px 18px; border-radius: var(--radius-lg);
  background: #fff; color: var(--text-body); border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.5;
}
.cookie-aviso p { margin: 0 0 12px; }
.cookie-aviso div { display: flex; gap: 10px; justify-content: flex-end; }
.cookie-aviso button {
  padding: 8px 18px; border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-body-sm);
  border: 1px solid var(--brand-primary); background: #fff; color: var(--brand-primary);
}
.cookie-aviso button[data-v="aceito"] { background: var(--brand-primary); color: #fff; }
@media (max-width: 640px) {
  .cookie-aviso { right: 16px; max-width: none; }
  .com-aviso .wafab { bottom: 168px; }
}