@import url("tokens.css");

/* Barra fina da marca no topo das páginas de projeto (/projetos/<slug>/).
   Tudo com prefixo cm- para não colidir com o CSS de cada app. */
.cm-barra {
  box-sizing: border-box;
  position: relative; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  min-height: 48px;
  padding: 2px max(12px, env(safe-area-inset-right, 0px)) 2px max(12px, env(safe-area-inset-left, 0px));
  background: var(--tinta); color: var(--papel);
  font: 500 14px/1.2 var(--f-texto);
  letter-spacing: 0;
}
.cm-barra a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 8px;
  color: inherit; text-decoration: none;
  border-radius: 3px;
}
.cm-barra a:hover { background: color-mix(in srgb, var(--papel) 12%, transparent); }
.cm-barra a:focus-visible { outline: 3px solid var(--serra); outline-offset: 2px; }
.cm-barra svg { display: block; }
.cm-barra__marca { padding-left: 2px; }
.cm-barra__marca svg { width: auto; height: 22px; }
.cm-barra__voltar { margin-left: auto; }
.cm-barra__wa { border: 1.5px solid color-mix(in srgb, var(--papel) 45%, transparent); }
.cm-barra .wa-ico { width: 18px; height: 18px; }
.cm-barra .wa-ico__balao { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cm-barra .wa-ico__fone { fill: currentColor; }
.cm-barra [hidden] { display: none !important; }
@media (max-width: 440px) {
  .cm-barra__marca svg { height: 19px; }
  .cm-barra__wa span { display: none; }
  .cm-barra__wa { min-width: 44px; justify-content: center; padding: 0; }
}