/* Elementos comunes a los sitios de demostración: el cartel de "demo" y el aviso de botones. */

.cartel-demo {
  position: sticky; top: 0; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 9px 16px; background: #fff4c2; color: #3d2f00; border-bottom: 2px solid #e0b300;
  font: 600 14px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
}
.cartel-demo strong { text-transform: uppercase; letter-spacing: .05em; }
.cartel-demo a { color: #3d2f00; }

.aviso-demo {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  width: calc(100% - 32px); max-width: 460px; z-index: 1001;
  padding: 14px 18px; border-radius: 12px; background: #16181d; color: #faf7f2;
  font: 500 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); text-align: center;
  visibility: hidden; opacity: 0; transition: transform .25s ease, opacity .25s ease, visibility .25s;
}
.aviso-demo.visible { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .aviso-demo { transition: none; } }