/* Cinematic 3D MP3 — portada de cinematic3dmp3.creanexo.com: piezas nuevas sobre sitio.css (mismos tokens, prefijo s-). */

/* Las dos demos */
.s-demos{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
@media (max-width:900px){.s-demos{grid-template-columns:1fr}}
.s-democard{display:flex;flex-direction:column;min-width:0;border-radius:22px;border:1px solid var(--s-line-2);background:linear-gradient(180deg,rgba(255,77,109,.08),rgba(255,255,255,.03) 45%);overflow:hidden}
.s-democard--wp{background:linear-gradient(180deg,rgba(176,124,255,.1),rgba(255,255,255,.03) 45%)}
.s-democard__img{display:block;aspect-ratio:1180/774;overflow:hidden;border-bottom:1px solid var(--s-line);background:#0d0b11}
.s-democard__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.s-democard__img:hover img{transform:scale(1.02)}
.s-democard__body{display:flex;flex-direction:column;gap:12px;flex:1;padding:24px 26px 26px}
.s-democard h3{margin:4px 0 0;font-size:26px;font-weight:800;letter-spacing:-.02em}
.s-democard p{margin:0;color:var(--s-muted)}
.s-democard .s-list{margin:2px 0 0}
.s-democard__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:10px}
.s-democard--wp .s-btn:not(.s-btn--ghost),.s-version--wp .s-btn:not(.s-btn--ghost){background:var(--s-accent-2);box-shadow:0 12px 34px -12px rgba(176,124,255,.7)}
.s-democard--wp .s-btn:not(.s-btn--ghost):hover,.s-version--wp .s-btn:not(.s-btn--ghost):hover{background:#c096ff;box-shadow:0 16px 40px -12px rgba(176,124,255,.85)}
.s-tag{display:inline-block;align-self:flex-start;padding:5px 11px;border-radius:999px;border:1px solid var(--s-line-2);background:rgba(255,255,255,.05);color:var(--s-muted);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.s-autoplay{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:16px 18px;border-radius:14px;border:1px solid var(--s-line);background:var(--s-surface);color:var(--s-muted);font-size:14.5px;line-height:1.5}
.s-autoplay svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--s-warn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-autoplay b{color:var(--s-text)}

/* Cómo funciona */
.s-howto{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:900px){.s-howto{grid-template-columns:1fr}}
.s-howto .s-version h3{margin-top:12px}

/* Galería: dos móviles en columna estrecha */
.s-gallery .s-shot--phone img{width:100%;height:auto}

/* Pie con enlaces */
.s-footer__links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}
.s-footer__links a{color:var(--s-muted);text-decoration:none;font-weight:600}
.s-footer__links a:hover{color:var(--s-text)}
#demos .s-tries{margin-top:20px}
.s-versions .s-democard__actions{padding-top:22px}