/* Portada de las demos (demo.alodigital.pro). Usa los tokens de portal.css: claro y oscuro solos. */
.demo { min-height: 100vh; padding: 48px 16px 64px; }
.demo__caja { max-width: 880px; margin: 0 auto; display: grid; gap: 28px; }
.demo__cab { display: grid; gap: 10px; }
.demo__eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--t3); }
.demo__cab h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.demo__lede { color: var(--t2); font-size: var(--fs-field); max-width: 60ch; }
.demo__prod { background: var(--card); border: 1px solid var(--b1); border-radius: var(--r-xl); box-shadow: var(--sh); padding: 22px; display: grid; gap: 16px; }
.demo__prod-cab { display: grid; gap: 6px; }
.demo__prod-cab h2 { font-size: var(--fs-h2); }
.demo__prod-cab p { color: var(--t2); max-width: 70ch; line-height: 1.55; }
.demo__roles { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.demo__rol { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--b2); background: var(--bg); color: var(--t1); text-decoration: none; transition: border-color .15s, transform .15s; }
.demo__rol b { font-size: var(--fs-card-ttl); }
.demo__rol span { color: var(--t2); font-size: var(--fs-meta); line-height: 1.5; }
.demo__rol::after { content: 'Entrar →'; margin-top: 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--acc); }
@media (hover: hover) { .demo__rol:hover { border-color: var(--acc); transform: translateY(-2px); } }
.demo__rol:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.demo__pie { color: var(--t3); font-size: var(--fs-meta); display: grid; gap: 4px; }
.demo__pie a { color: var(--t2); }
@media (prefers-reduced-motion: reduce) { .demo__rol { transition: none; } }