/* Estilo base com foco nas cores da logo: grafite/acinzentado e detalhes em âmbar */
:root{
  --bg:#0b0f14;          /* fundo escuro profissional */
  --metal-1:#cfd5db;     /* prata clara */
  --metal-2:#9aa3ab;     /* prata média */
  --metal-3:#6b7785;     /* prata escura */
  --accent:#f59e0b;      /* amber (laranja) */
}

body{ background: var(--bg); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Efeito "metallic" nos títulos para remeter ao logo cromado */
.metallic{
  background: linear-gradient(180deg, var(--metal-1) 0%, #ffffff 25%, var(--metal-2) 55%, var(--metal-3) 100%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 6px 12px rgba(0,0,0,.35);
}

/* Botão de WhatsApp com leve brilho */
.whatsapp-cta{ box-shadow: 0 8px 30px rgba(245,158,11,.25); }
.whatsapp-cta:hover{ box-shadow: 0 10px 36px rgba(245,158,11,.35); }

/* Utilitário para considerar a safe area (iOS) quando necessário */
.pb-safe{ padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)); }

/* Pequenos ajustes responsivos */
@media (max-width:640px){
  header a span{ display:none; }
}

/* Melhorias específicas para mobile */
@media (max-width:640px){
  :root{ --mobile-cta-height: 64px; }
  /* Evita que a barra fixa cubra o conteúdo */
  main{ padding-bottom: calc(var(--mobile-cta-height) + env(safe-area-inset-bottom, 0px)); }
  /* Navegação por âncora não ficar escondida sob o header sticky */
  section{ scroll-margin-top: 84px; }
  /* Título do hero um pouco menor em telas pequenas */
  #inicio h1{ font-size: 1.875rem; /* ~30px */ }
}