/* =========================================================
   Piezas compartidas por los treinta ejemplos:
   la barra que avisa que es una demostración y el aviso que
   sale al tocar un botón de contacto.
   Cada ejemplo tiene su propio diseño; esto solo se monta encima.
   ========================================================= */

.demo-barra{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.4rem 1rem; padding:.55rem 1rem;
  background:#12161B; color:rgba(255,255,255,.82);
  font:500 .82rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing:.01em; text-align:center;
}
.demo-barra b{ color:#fff; font-weight:600; }
.demo-barra a{
  display:inline-flex; align-items:center; gap:.35rem;
  color:#12161B; background:#F5C451; text-decoration:none;
  padding:.35rem .8rem; border-radius:999px; font-weight:600; white-space:nowrap;
}
.demo-barra a:hover{ background:#FFD978; }

/* El aviso: lo que pasaría de verdad al tocar el botón. */
.demo-aviso{
  width:min(460px, 92vw); padding:0; border:0; border-radius:16px;
  background:#fff; color:#1b2228;
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
.demo-aviso::backdrop{ background:rgba(10,14,18,.6); }
.demo-aviso__caja{ padding:1.6rem 1.5rem 1.4rem; }
.demo-aviso__tit{ margin:0 0 .5rem; font-size:1.15rem; font-weight:700; color:#12161B; }
.demo-aviso__txt{ margin:0 0 1rem; font-size:.95rem; line-height:1.55; color:#4a5560; }
.demo-aviso__mensaje{
  margin:0 0 1.2rem; padding:.9rem 1rem; border-radius:12px;
  background:#E7F6EC; border:1px solid #BFE5CC; color:#12321E;
  font-size:.95rem; line-height:1.5; white-space:pre-wrap;
}
.demo-aviso__pie{ display:flex; flex-wrap:wrap; gap:.6rem; }
.demo-aviso button, .demo-aviso .demo-aviso__cta{
  flex:1 1 auto; min-height:44px; padding:.7rem 1.1rem; border-radius:10px;
  font:600 .95rem system-ui, sans-serif; cursor:pointer; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.demo-aviso__cerrar{ background:#fff; border-color:#d3dade; color:#1b2228; }
.demo-aviso__cerrar:hover{ background:#f3f6f7; }
.demo-aviso__cta{ background:#12161B; color:#fff; }
.demo-aviso__cta:hover{ background:#2a323a; }

@media (prefers-reduced-motion:no-preference){
  .demo-aviso[open]{ animation:demo-entra .2s ease; }
  @keyframes demo-entra{ from{ opacity:0; transform:translateY(8px); } }
}