/* Banner that marks every page in /ejemplos/ as an example and links to the editor.
   Selectors are doubled to win over the exported site's global link styles. */
html { scroll-padding-top: 64px; }
body { padding-top: 56px; }
.example-banner.example-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px;
  min-height: 56px; padding: 6px 16px; box-sizing: border-box;
  background: #0b1630; color: #f3f4f6;
  font: 500 14px/1.3 "DM Sans", "Segoe UI", system-ui, sans-serif; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.example-banner.example-banner a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px;
  background: #0b63f6; color: #ffffff; font: 700 14px/1.2 "DM Sans", "Segoe UI", system-ui, sans-serif;
  text-decoration: none;
}
.example-banner.example-banner a:hover { background: #0a55d4; color: #ffffff; }
.example-banner.example-banner a:focus-visible { outline: 3px solid #7fb0ff; outline-offset: 2px; }
@media (max-width: 480px) {
  html { scroll-padding-top: 84px; }
  body { padding-top: 76px; }
  .example-banner.example-banner { min-height: 76px; font-size: 13px; }
  .example-banner.example-banner a { min-height: 36px; padding: 6px 14px; font-size: 13px; }
}