::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F3F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #02184d; }

.gold-gradient-text {
    background: linear-gradient(135deg, #FFFFFF 0%, #F3E5B8 40%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-pulse { animation: pulse-glow 2.2s infinite; }
@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .92; transform: scale(1.02); }
}

/* ── Carousel ── */
.carousel-slide { display: none; }
.carousel-slide.active { display: flex; animation: fadeSlide .45s ease-in-out; }
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Banner 2 image responsive position ── */
.banner2-img { object-position: 0% 0%; }
@media (min-width: 768px) { .banner2-img { object-position: 100% 100%; } }

/* ── Banner 3 image: top-anchored so oval is always visible ── */
.banner3-img { object-position: top center; }

/* ── Banner 3 badge overlay: fixed below 953px, vw-proportional above ── */
.banner3-overlay-badge {
    top: clamp(60px, 4.5vw, 130px); /* mobile: min 60px */
    left: 50%;
    transform: translateX(-50%);
    width: min(clamp(350px, 37vw, 750px), 90vw);
}
@media (min-width: 768px) {
    .banner3-overlay-badge { top: clamp(43px, 4.5vw, 130px); } /* desktop: min 43px alineado al óvalo */
}
/* ── Banner 3 desktop content widths ── */
.banner3-desktop-heading  { width: clamp(620px, 75vw, 1500px); }
.banner3-desktop-subtitle { width: clamp(510px, 60vw, 1300px); }
.banner3-desktop-btn      { width: clamp(220px, 28vw, 580px); }

/* ── Banner 2 desktop overlays: fixed px below 930px, vw-proportional above ── */
.banner2-overlay-text {
    right: 2%;
    bottom: clamp(78px, 8.4vw, 600px);
    width: clamp(353px, 38vw, 900px);
}
.banner2-overlay-btn {
    right: 2%;
    bottom: clamp(20px, 2.1vw, 200px);
    width: clamp(353px, 38vw, 900px);
}

/* ── Banner 4 desktop content widths ── */
.banner4-desktop-heading  { width: clamp(580px, 60vw, 1400px); }
.banner4-desktop-subtitle { width: clamp(580px, 60vw, 1400px); }
.banner4-desktop-btn      { width: clamp(310px, 33vw, 750px); }

/* ── Slide backgrounds ── */
.slide-bg-1 { background: linear-gradient(135deg, #001038 0%, #02184d 45%, #0B215E 100%); }
.slide-bg-2 { background: linear-gradient(135deg, #1a0530 0%, #3a0d6e 50%, #0a0a2e 100%); }
.slide-bg-3 { background: linear-gradient(135deg, #002418 0%, #004d2b 50%, #001038 100%); }
.slide-bg-4 { background: linear-gradient(135deg, #1c0a00 0%, #4a1800 50%, #001038 100%); }

/* ── Chat panel transition ── */
#chat-panel.hidden  { opacity: 0; pointer-events: none; transform: translateY(12px) scale(.97); }
#chat-panel.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

/* ── Carousel arrows: lower on mobile to avoid text overlap, centered on desktop (BUG-12) ── */
.carousel-arrow { display: flex; position: absolute; top: 60%; transform: translateY(-50%); }
@media (min-width: 768px) {
    .carousel-arrow { top: 45%; }
}

/* ── Top bar: prevent link text from wrapping at 1024-1279px (BUG-24) ── */
.top-bar-links > * { white-space: nowrap; }
.top-bar-links { gap: 10px; }
@media (min-width: 1280px) { .top-bar-links { gap: 24px; } }