/* ===========================================================
   Bluhertz — base compartilhada das páginas-modelo (modelos/)
   Só o que é comum: reset, barra "Modelo de site" no topo e o
   rodapé de crédito. Cada modelo tem o seu próprio CSS.
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Inter", system-ui, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* ---------- Barra fixa "isto é um modelo" (cores da Bluhertz) ---------- */
.mb {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px;
  background: #061233; color: #eaf0ff;
  border-bottom: 1px solid rgba(56, 198, 255, .25);
  font-size: .9rem;
}
.mb__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.mb__brand img { height: 22px; width: auto; }
.mb__tag { color: #38c6ff; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.mb__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb__back { color: rgba(234, 240, 255, .8); text-decoration: none; }
.mb__back:hover { color: #fff; text-decoration: underline; }
.mb__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(120deg, #1e6bff, #38c6ff); color: #fff; text-decoration: none;
  font-weight: 700; padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(30, 107, 255, .7);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mb__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(30, 107, 255, .8); }
@media (max-width: 560px) {
  .mb { justify-content: center; text-align: center; }
  .mb__back { display: none; }
}

/* ---------- Rodapé de crédito ---------- */
.mf { padding: 22px 20px; text-align: center; font-size: .85rem; background: #061233; color: rgba(234, 240, 255, .75); }
.mf a { color: #38c6ff; text-decoration: none; }
.mf a:hover { text-decoration: underline; }