:root { --rayo-red: #E30613; --rayo-red-dark: #B8040F; --rayo-black: #121212; --rayo-gold: #D4AF37; --rayo-bg: #F8F9FA; --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-display { font-family: var(--rayo-font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.rayo-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rayo-red); background: rgba(227, 6, 19, .2); color: var(--rayo-red); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 24px; }
.rayo-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--rayo-red); animation: rayoPing 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes rayoPing { 75%, 100% { transform: scale(2); opacity: 0; } }
.rayo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border-radius: .75rem; font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; transition: background .3s; }
.rayo-btn--red { background: var(--rayo-red); color: #fff; animation: rayoGlow 3s infinite; }
.rayo-btn--red:hover { background: var(--rayo-red-dark); color: #fff; }
@keyframes rayoGlow { 0%, 100% { box-shadow: 0 0 15px rgba(227, 6, 19, .4); } 50% { box-shadow: 0 0 25px rgba(227, 6, 19, .8); } }


.rayo-slider { position: relative; background: var(--rayo-black); overflow: hidden; }
.rayo-slider__track { position: relative; }
.rayo-slide { display: none; position: relative; }
.rayo-slide.is-active { display: block; animation: rayoFade .6s ease; }
@keyframes rayoFade { from { opacity: 0; } to { opacity: 1; } }
.rayo-slide picture { display: block; }
.rayo-slide img { display: block; width: 100%; height: auto; }
.rayo-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(18, 18, 18, .8), rgba(18, 18, 18, .45) 40%, transparent 70%); }
.rayo-slide__text { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.rayo-slide__inner { width: 100%; max-width: var(--rayo-max); margin: 0 auto; padding: 0 var(--rayo-gutter); text-align: left; color: #fff; }
.rayo-slide__inner > * { max-width: 672px; }
.rayo-slide__inner h2 { font-size: clamp(2.8rem, 7vw, 4.5rem); line-height: 1; margin: 0 0 16px; color: #fff; }
.rayo-slide__inner h2 span { color: var(--rayo-red); }
.rayo-slide__inner p { color: #e5e7eb; font-size: 1.1rem; font-weight: 300; line-height: 1.6; margin: 0 0 28px; }
.rayo-slider__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(18, 18, 18, .7); color: #fff; cursor: pointer; transition: background .3s; }
.rayo-slider__nav:hover { background: var(--rayo-red); }
.rayo-slider__nav--prev { left: 16px; }
.rayo-slider__nav--next { right: 16px; }
.rayo-slider__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.rayo-slider__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .3s, background .3s; }
.rayo-slider__dot.is-active { width: 28px; background: var(--rayo-red); }

@media (max-width: 767px) {
    .rayo-slide img { min-height: 420px; object-fit: cover; object-position: center top; }
    .rayo-slider__nav { display: none; }
    .rayo-slide::before { background: linear-gradient(180deg, rgba(18, 18, 18, .2), rgba(18, 18, 18, .75)); }
    .rayo-slide__text { align-items: flex-end; padding-bottom: 40px; }
}

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