/* Elementos comuns aos sites demonstrativos do portfólio (faixa de aviso + janela de demonstração).
   O visual de cada demo fica no <style> da própria página. */

.demo-ribbon {
  position: relative; z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .9rem;
  padding: .55rem 16px;
  background: #05070E; color: #CBD4E1;
  font: 500 .82rem/1.35 "Inter", system-ui, sans-serif; text-align: center;
  border-bottom: 1px solid rgba(86,220,255,.35);
}
.demo-ribbon strong { color: #56DCFF; font-weight: 700; }
.demo-ribbon a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.demo-dialog {
  width: min(420px, calc(100vw - 32px)); padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid rgba(86,220,255,.4); border-radius: 18px;
  background: #0B1020; color: #E6ECF5;
  font: 400 1rem/1.55 "Inter", system-ui, sans-serif;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(30,111,232,.25);
}
.demo-dialog::backdrop { background: rgba(5,7,14,.7); backdrop-filter: blur(3px); }
.demo-dialog h2 { margin: 0 0 .5rem; font: 700 1.2rem/1.3 "Inter", system-ui, sans-serif; color: #fff; }
.demo-dialog p { margin: 0 0 1.2rem; color: #B7C2D4; }
.demo-dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.demo-dialog-actions a,
.demo-dialog-actions button {
  flex: 1 1 auto; padding: .75rem 1rem; border-radius: 999px; cursor: pointer;
  font: 700 .95rem/1 "Inter", system-ui, sans-serif; text-align: center; text-decoration: none;
}
.demo-dialog-actions a { background: linear-gradient(135deg, #1E6FE8, #56DCFF); color: #05070E; border: 0; }
.demo-dialog-actions button { background: transparent; color: #CBD4E1; border: 1px solid #2A3550; }