.demo-root{--demo-bg:#fff;--demo-surface:#f7f8fa;--demo-surface-elevated:#fff;--demo-input-bg:#f0f2f5;--demo-border:#1b3a6b1f;--demo-border-strong:#1b3a6b40;--demo-text:#0f1923;--demo-text-muted:#6b7a8d;--demo-accent:#1b3a6b;--demo-accent-hover:#15305a;--demo-accent-contrast:#fff;--demo-accent-light:#e8edf5;--demo-accent-mid:#4a6fa5;--demo-danger:#dc2626;--demo-shadow-sm:0 1px 3px #1b3a6b14,0 1px 2px #1b3a6b0f;--demo-shadow-md:0 4px 16px #1b3a6b1a,0 2px 6px #1b3a6b12;--demo-shadow-lg:0 12px 40px #1b3a6b24,0 4px 12px #1b3a6b14;background:var(--demo-bg);color:var(--demo-text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.demo-main{flex-direction:column;min-height:100vh;display:flex}.demo-top{border-bottom:1px solid var(--demo-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;box-shadow:var(--demo-shadow-sm);background:#ffffffeb;position:sticky;top:0}.demo-top-inner{justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:14px 24px;display:flex}.demo-top-logo{align-items:center;text-decoration:none;transition:transform .18s;display:inline-flex}.demo-top-logo:hover{transform:scale(1.03)}.demo-top-logo-img{object-fit:contain;width:auto;height:36px}.demo-top-cta{color:var(--demo-accent-contrast);background:var(--demo-accent);border:1px solid var(--demo-accent);box-shadow:var(--demo-shadow-sm);border-radius:999px;padding:8px 18px;font-size:12px;font-weight:600;text-decoration:none;transition:all .18s}.demo-top-cta:hover{background:var(--demo-accent-hover);border-color:var(--demo-accent-hover);box-shadow:var(--demo-shadow-md);transform:translateY(-1px)}.demo-grid{flex:1;grid-template-columns:minmax(280px,420px) 1fr;align-items:start;gap:32px;width:100%;max-width:1280px;margin:0 auto;padding:32px 24px;display:grid}.demo-left{background:var(--demo-surface-elevated);border:1px solid var(--demo-border);box-shadow:var(--demo-shadow-md);border-radius:20px;padding:28px 24px}.demo-right{justify-content:center;align-items:flex-start;max-height:calc(100vh - 96px);display:flex;position:sticky;top:96px}.demo-foot{border-top:1px solid var(--demo-border);text-align:center;color:var(--demo-text-muted);max-width:900px;margin:0 auto;padding:18px 24px;font-size:11px}@media (max-width:900px){.demo-grid{grid-template-columns:1fr;gap:24px}.demo-right{position:static}}.demo-feature-btn{background:var(--demo-surface-elevated);border:1px solid var(--demo-border-strong);color:var(--demo-accent);cursor:pointer;white-space:nowrap;box-shadow:var(--demo-shadow-sm);z-index:10;border-radius:999px;align-items:center;gap:8px;padding:9px 14px;font-size:11px;font-weight:600;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute}.demo-feature-btn:hover{background:var(--demo-accent);color:var(--demo-accent-contrast);border-color:var(--demo-accent);box-shadow:var(--demo-shadow-lg);z-index:20;transform:scale(1.06)}.demo-feature-btn .demo-feature-icon{font-size:14px;line-height:1}.demo-feature-btn-pulse{animation:2.4s ease-in-out infinite demo-pulse}@keyframes demo-pulse{0%,to{box-shadow:var(--demo-shadow-sm),0 0 0 0 #1b3a6b33}50%{box-shadow:var(--demo-shadow-md),0 0 0 8px #1b3a6b00}}.demo-tooltip-card{z-index:100;background:var(--demo-surface-elevated);border:1px solid var(--demo-border-strong);box-shadow:var(--demo-shadow-lg);pointer-events:none;opacity:0;border-radius:16px;width:260px;transition:opacity .18s,transform .18s cubic-bezier(.34,1.56,.64,1);position:absolute;overflow:hidden;transform:translateY(6px)scale(.97)}.demo-feature-btn:hover .demo-tooltip-card,.demo-feature-btn:focus-visible .demo-tooltip-card{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.demo-tooltip-img{object-fit:cover;width:100%;height:140px;display:block}.demo-tooltip-body{padding:12px 14px 14px}.demo-tooltip-title{color:var(--demo-text);margin:0 0 4px;font-size:13px;font-weight:700}.demo-tooltip-desc{color:var(--demo-text-muted);margin:0;font-size:11px;line-height:1.5}.demo-phone-scene{display:inline-block;position:relative}.demo-btn-credencial{top:80px;left:-170px}.demo-btn-afiliacion{top:180px;left:-168px}.demo-btn-votaciones{top:280px;left:-160px}.demo-btn-encuestas{top:380px;left:-148px}.demo-btn-marketplace{top:130px;right:-168px}.demo-btn-chat-ia{top:240px;right:-156px}.demo-btn-compras{top:350px;right:-148px}.demo-btn-arrow{background:var(--demo-border-strong);vertical-align:middle;width:28px;height:1px;transition:background .18s;display:inline-block}.demo-feature-btn:hover .demo-btn-arrow{background:var(--demo-accent-contrast)}.demo-btn-marketplace .demo-tooltip-card,.demo-btn-chat-ia .demo-tooltip-card,.demo-btn-compras .demo-tooltip-card{top:50%;left:auto;right:calc(100% + 10px);transform:translateY(-50%)scale(.97)translate(6px)}.demo-btn-marketplace:hover .demo-tooltip-card,.demo-btn-chat-ia:hover .demo-tooltip-card,.demo-btn-compras:hover .demo-tooltip-card{transform:translateY(-50%)scale(1)translate(0)}.demo-btn-credencial .demo-tooltip-card,.demo-btn-afiliacion .demo-tooltip-card,.demo-btn-votaciones .demo-tooltip-card,.demo-btn-encuestas .demo-tooltip-card{top:50%;left:calc(100% + 10px);right:auto;transform:translateY(-50%)scale(.97)translate(-6px)}.demo-btn-credencial:hover .demo-tooltip-card,.demo-btn-afiliacion:hover .demo-tooltip-card,.demo-btn-votaciones:hover .demo-tooltip-card,.demo-btn-encuestas:hover .demo-tooltip-card{transform:translateY(-50%)scale(1)translate(0)}@media (max-width:1100px){.demo-feature-btn{display:none}.demo-features-mobile{display:grid!important}}.demo-features-mobile{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px;padding:0 4px;display:none}.demo-features-mobile-btn{background:var(--demo-surface-elevated);border:1px solid var(--demo-border-strong);color:var(--demo-accent);cursor:pointer;border-radius:12px;align-items:center;gap:8px;padding:10px 14px;font-size:11px;font-weight:600;transition:all .18s;display:flex}.demo-features-mobile-btn:hover{background:var(--demo-accent-light)}