/* SUBLISPORT - HOJA DE ESTILOS */

*, *::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; }

/* VARIABLES DE COLORES (Modifica aquí para cambiar la paleta) */
: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;
}

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

#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; box-shadow: none; animation: boxPulse 2s ease-in-out infinite; overflow: hidden;
}

@keyframes boxPulse { 0% { transform: scale(0.8); } 50% { transform: scale(1.1); } 100% { transform: scale(0.8); } }

.loader-img {
    position: absolute; z-index: 2; width: 200px; height: 200px;
    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 DISEÑOS (Adaptado a 1080x1080 sin perder forma) */
.slider-container {
    position: relative; width: 100%; overflow: hidden;
    border-radius: 40px; background: #111; /* Fondo para images cuadradas */
}

@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; /* ADAPTACIÓN: Mantiene la forma 1080x1080 sin recortes */
    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;
}

@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; }