/* Capa de la demo pública: bienvenida y enlace de contacto */
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html, body { height: 100%; margin: 0; background: #0D1828; }
#app { height: 100%; }
.demo-intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(13, 24, 40, 0.72); backdrop-filter: blur(3px); font-family: Barlow, "Segoe UI", system-ui, sans-serif; color: #15212C; }
.demo-intro[hidden] { display: none; }
.demo-card { width: min(560px, 100%); max-height: calc(100% - 20px); overflow: auto; background: #F8FAFB; border-radius: 14px; border-top: 6px solid #F5B800; padding: 22px 24px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.demo-card h1 { margin: 0 0 6px; font: 700 30px/1.1 "Barlow Condensed", "Segoe UI", sans-serif; }
.demo-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: #3D4B58; }
.demo-card ol { margin: 0 0 16px; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.demo-card li { margin-bottom: 4px; }
.demo-card b { color: #15212C; }
.demo-card .demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-card button { border: 0; border-radius: 8px; background: #2E6BB8; color: #fff; font: 600 16px Barlow, "Segoe UI", sans-serif; padding: 10px 22px; cursor: pointer; }
.demo-card button:focus-visible, .demo-badge:focus-visible { outline: 2px solid #F5B800; outline-offset: 2px; }
.demo-card small { color: #566573; font-size: 12.5px; }
.demo-badge { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; padding: 6px 14px; border-radius: 999px; background: rgba(21, 33, 44, 0.86); color: #E6EEF7; font: 500 13px Barlow, "Segoe UI", sans-serif; text-decoration: none; white-space: nowrap; }
.demo-badge b { color: #F5B800; font-weight: 600; }
@media (max-width: 820px) { .demo-badge { display: none; } }