/* SUBLISPORT - HOJA DE ESTILOS 2025 (CLAY, GLASS & VIP GOLD) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #root {
    background: #0C0C0C;
    font-family: 'Kanit', sans-serif;
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }

:root {
    --bg-primary: #991a1a;
    --bg-white: #FFFFFF;
    --text-primary: #D7E2EA;
    --text-muted: #646973;
    --accent-red: #D32F2F;
    --accent-dark-red: #B71C1C;
    --accent-orange-red: #FF3D00;
    --gradient-btn: linear-gradient(123deg, #4A0000 7%, #D32F2F 37%, #B71C1C 72%, #FF3D00 100%);
    --gradient-heading: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
    --border-color: #D7E2EA;
    --sticky-top: 96px;
    --slider-interval: 4000ms;
    --clay-shadow: 8px 8px 16px rgba(0,0,0,0.7), -4px -4px 12px rgba(255,255,255,0.03), inset 2px 2px 4px rgba(255,255,255,0.05);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    /* Dorado VIP */
    --gold-gradient: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
}

@media (min-width: 768px) { :root { --sticky-top: 128px; } }

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

.clay-card {
    background: #141414;
    border-radius: 32px;
    box-shadow: var(--clay-shadow);
    border: 1px solid rgba(255,255,255,0.04);
}

/* EFECTO DORADO VIP */
.gold-text {
    background: var(--gold-gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to { background-position: 200% center; }
}

.vip-border {
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.15), 8px 8px 16px rgba(0,0,0,0.8);
}

#loader {
    position: fixed; inset: 0; z-index: 9999; background: #0C0C0C;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 32px; transition: opacity 0.6s ease-out;
}

#loader.fade-out { opacity: 0; pointer-events: none; }

.loader-ring {
    position: absolute; width: 220px; height: 220px; border-radius: 50%;
    border: 3px solid transparent; border-top-color: #D32F2F; border-right-color: #B71C1C;
    animation: ringSpin 1.4s linear infinite; pointer-events: none;
}

.loader-ring::before {
    content: ''; position: absolute; inset: 8px; border-radius: 50%;
    border: 2px solid transparent; border-bottom-color: #FF3D00; border-left-color: #D32F2F;
    animation: ringSpin 2s linear infinite reverse;
}

@keyframes ringSpin { to { transform: rotate(360deg); } }

.loader-box {
    position: relative; width: 200px; height: 200px; display: flex;
    align-items: center; justify-content: center; border-radius: 24px;
    background: transparent; animation: boxPulse 2.5s ease-in-out infinite; overflow: hidden;
}

@keyframes boxPulse { 
    0% { transform: scale(1); opacity: 0.9; } 
    50% { transform: scale(1.05); opacity: 1; } 
    100% { transform: scale(1); opacity: 0.9; } 
}

.loader-img {
    position: absolute; z-index: 2; width: 160px; height: 160px;
    object-fit: contain; border-radius: 16px;
}

.loader-text {
    position: relative; z-index: 1; font-weight: 900; font-size: 1.5rem; color: #D7E2EA;
    letter-spacing: 0.12em; text-transform: uppercase; text-align: center; line-height: 1.2; padding: 8px; user-select: none;
}

.loader-dots { display: flex; gap: 10px; }
.loader-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(215, 226, 234, 0.25); animation: dotBounce 1.4s ease-in-out infinite; }
.loader-dot:nth-child(2) { animation-delay: 0.15s; }
.loader-dot:nth-child(3) { animation-delay: 0.3s; }
.loader-dot:nth-child(4) { animation-delay: 0.45s; }
.loader-dot:nth-child(5) { animation-delay: 0.6s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.6); background: rgba(215, 226, 234, 0.2); }
    40% { transform: scale(1.4); background: #D32F2F; box-shadow: 0 0 10px rgba(211, 47, 47, 0.5); }
}

.loader-bar { width: 200px; height: 3px; background: rgba(215, 226, 234, 0.1); border-radius: 3px; overflow: hidden; }
.loader-bar-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #D32F2F, #B71C1C, #FF3D00); border-radius: 3px; animation: barGrow 3s ease-in-out infinite; }

@keyframes barGrow {
    0% { width: 0%; } 50% { width: 75%; } 80% { width: 95%; } 100% { width: 100%; opacity: 0.3; }
}

.hero-heading { background: var(--gradient-heading); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
::selection { background: rgba(211, 47, 47, 0.3); color: #fff; }

.slider-container {
    position: relative; width: 100%; overflow: hidden;
    border-radius: 40px; background: #111; 
}

@media (min-width: 640px) { .slider-container { border-radius: 50px; } }
@media (min-width: 768px) { .slider-container { border-radius: 60px; } }

.slider-slide { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.slider-slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 40px; object-position: center; }

@media (min-width: 640px) { .slider-slide img { border-radius: 50px; } }
@media (min-width: 768px) { .slider-slide img { border-radius: 60px; } }

.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 48px; height: 48px; border-radius: 50%; 
    background: rgba(12, 12, 12, 0.6); backdrop-filter: blur(8px);
    border: 1.5px solid rgba(215, 226, 234, 0.3); color: #D7E2EA;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease;
}

.slider-arrow:hover { background: rgba(211, 47, 47, 0.4); border-color: #D7E2EA; transform: translateY(-50%) scale(1.1); }
.slider-arrow-left { left: 16px; } .slider-arrow-right { right: 16px; }

@media (min-width: 768px) {
    .slider-arrow { width: 56px; height: 56px; }
    .slider-arrow-left { left: 24px; } .slider-arrow-right { right: 24px; }
}

.slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 8px; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(215, 226, 234, 0.3); border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; }
.slider-dot.active { background: #D32F2F; transform: scale(1.3); box-shadow: 0 0 12px rgba(211, 47, 47, 0.5); }
.slider-dot:hover:not(.active) { background: rgba(215, 226, 234, 0.6); }

.slider-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #D32F2F, #B71C1C, #FF3D00); z-index: 20; border-radius: 0 2px 2px 0; }

.map-frame { width: 100%; height: 300px; border: 2px solid rgba(215, 226, 234, 0.15); border-radius: 24px; overflow: hidden; }
@media (min-width: 768px) { .map-frame { height: 380px; border-radius: 32px; } }
.map-frame iframe { width: 100%; height: 100%; border: none; filter: grayscale(0.6) contrast(1.1) brightness(0.85); transition: filter 0.4s ease; }
.map-frame:hover iframe { filter: grayscale(0.2) contrast(1) brightness(0.95); }

.nav-logo { height: 36px; width: auto; object-fit: contain; border-radius: 6px; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-logo:hover { transform: scale(1.5); opacity: 0.85; }
@media (min-width: 768px) { .nav-logo { height: 44px; } }
@media (min-width: 1024px) { .nav-logo { height: 52px; } }

.nav-logo-fallback {
    font-weight: 900; font-size: 1.3rem; color: #D7E2EA;
    background: linear-gradient(123deg, #4A0000 7%, #D32F2F 37%, #B71C1C 72%, #FF3D00 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.05em;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #D32F2F; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #FF3D00; }

.size-chip {
    background: #0C0C0C; color: #D7E2EA; border-radius: 16px; padding: 12px 20px;
    font-weight: 600; border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.6), -2px -2px 6px rgba(255,255,255,0.05), inset 2px 2px 4px rgba(255,255,255,0.03);
    transition: all 0.3s ease;
}
.size-chip:hover {
    transform: translateY(-3px);
    color: #fff; border-color: #D32F2F;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.8), -3px -3px 8px rgba(255,255,255,0.08), inset 2px 2px 4px rgba(211,47,47,0.2);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0C0C0C; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #D32F2F; }