* { box-sizing: border-box; }
body { margin: 0; background: #17151e; color: #fff3dc; font: 1rem/1.45 system-ui, sans-serif; }
main { width: min(1120px, 92vw); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 0; }
header { margin-bottom: 2rem; border-bottom: 1px solid #514359; padding-bottom: 1.4rem; }
h1 { margin: 0; font-size: clamp(2.5rem, 9vw, 6rem); line-height: 1; letter-spacing: -.075em; }
h1 span { color: #ffbd73; }
p { color: #d6c8d9; margin: .8rem 0 0; }
.catalogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.card { display: block; border-radius: 14px; border: 1px solid #514359; overflow: hidden; text-decoration: none; color: inherit; background: #272133; transition: border-color .15s, transform .15s; }
.card:hover, .card:focus-visible { border-color: #ffbd73; transform: translateY(-3px); }
.card:focus-visible { outline: 2px solid #ffbd73; outline-offset: 4px; }
.cover { position: relative; display: grid; aspect-ratio: 16/9; place-items: center; color: #241b28; background: repeating-linear-gradient(135deg, #2115231a 0 1px, transparent 1px 16px), var(--accent); }
.cover > span { font-size: 3.6rem; text-shadow: 0 5px #25182922; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caption { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .95rem 1rem; }
.caption span { color: #ffbd73; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }