/* Páginas de producto de la landing (Reproductor, Colección): la grilla de bloques y la foto ancha del hero. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 36px; }
.feature { display: grid; gap: 10px; align-content: start; padding: 24px 22px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); }
.feature > span { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-hot); }
.feature h3 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* Hero con una foto apaisada en vez de la pantalla del celular. */
.hero-screen.wide { aspect-ratio: 4 / 3; width: min(560px, 100%); }
.hero-screen.wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-nav-current { color: var(--purple-hot) !important; }
@media (max-width: 720px) { .feature { padding: 20px 18px; } .feature h3 { font-size: 18px; } }