:root { --rayo-red: #E30613; --rayo-red-dark: #B8040F; --rayo-black: #121212; --rayo-font-display: 'Bebas Neue', 'Impact', sans-serif; --rayo-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --rayo-max: 1840px; --rayo-gutter: clamp(16px, 3vw, 56px); }

.rayo-categories { padding: 48px 0; font-family: var(--rayo-font-body); }
.rayo-categories__container { max-width: var(--rayo-max); margin: 0 auto; padding: 0 var(--rayo-gutter); }
.rayo-categories__title { font-family: var(--rayo-font-display); font-weight: 400; font-size: 2.4rem; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--rayo-black); margin: 0 0 32px; }
.rayo-categories__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 992px) { .rayo-categories__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.rayo-category { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 1rem; background: linear-gradient(to top, #000, rgba(18, 18, 18, .6), #1f2937); box-shadow: 0 10px 20px rgba(0, 0, 0, .2); transition: transform .3s, box-shadow .3s; }
.rayo-category:hover { transform: translateY(-8px); box-shadow: 0 20px 30px rgba(0, 0, 0, .3); }
.rayo-category img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rayo-category:hover img { transform: scale(1.06); }

.rayo-category__panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px 20px; background: linear-gradient(to top, var(--rayo-black), rgba(18, 18, 18, .85) 60%, transparent); text-align: center; }
.rayo-category__name { font-family: var(--rayo-font-display); font-size: 1.7rem; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: #fff; transition: color .3s; }
.rayo-category:hover .rayo-category__name { color: var(--rayo-red); }
.rayo-category__cta { display: block; width: 100%; padding: 10px; border-radius: .75rem; background: var(--rayo-red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .3s; }
.rayo-category:hover .rayo-category__cta { background: var(--rayo-red-dark); }

html, body { overflow-x: clip; }
.rayo-categories { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; }