/* Barra de Forja Web en las demos: identifica la demo, permite volver y cotizar.
   Se oculta cuando la demo se ve dentro del visor (?embed). */
:root { --fw-bar: 48px; }
html.fw-embed { --fw-bar: 0px !important; }
.fw-embed .fw-bar { display: none !important; }
.fw-bar {
  position: sticky; top: 0; z-index: 1000; height: var(--fw-bar);
  display: flex; align-items: center; gap: 12px; padding: 0 clamp(10px, 2.4vw, 24px);
  background: #0f110f; color: #f2ede3; border-bottom: 1px solid rgba(242, 237, 227, .14);
  font: 500 14px/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0;
}
.fw-bar a { color: inherit; text-decoration: none; }
.fw-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; margin-left: -10px; border-radius: 8px; white-space: nowrap; }
.fw-back:hover { background: rgba(242, 237, 227, .08); }
.fw-id { margin: 0 auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.fw-pill { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(242, 237, 227, .3); color: #d9d3c6; }
.fw-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-cta { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #c8ff2d; color: #0f110f !important; font-weight: 600; white-space: nowrap; }
.fw-cta:hover { background: #b4ec14; }
.fw-bar a:focus-visible { outline: 3px solid #f2ede3; outline-offset: 2px; }
@media (max-width: 640px) {
  :root { --fw-bar: 44px; }
  .fw-bar { font-size: 13px; gap: 8px; }
  .fw-hide-s { display: none; }
  .fw-pill { font-size: 10px; padding: 4px 6px; }
  .fw-cta { padding: 0 12px; min-height: 34px; }
}
@media (max-width: 360px) { .fw-name { display: none; } }