:root { 
    --patagonia-dark: #2d3e4e; 
    --patagonia-blue: #0e6b9e; 
    --patagonia-bg: #f8fafc; 
}

body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--patagonia-bg); 
}

.logo-circle { 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 1px solid #e2e8f0; 
}

.nav-link:hover { 
    color: var(--patagonia-blue); 
    border-bottom: 2px solid var(--patagonia-blue); 
}

.hero-bg {
    position: relative;
    background-color: #2d3e4e;
}

/* --- ANIMACIONES DE ENTRADA --- */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.9s; }

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* --- EFECTO TRANSICIÓN VIDEOS DE FONDO --- */
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none; /* Seguridad: Evita clics directos sobre el video */
}
.video-hidden { opacity: 0; z-index: 0; }
.video-visible { opacity: 1; z-index: 1; }

/* --- LOGICA GALERÍA --- */
.slider-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #e2e8f0;
}

.fade-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Transición suave de 1.5s */
    z-index: 1;
}

.fade-image.active {
    opacity: 1;
    z-index: 2;
}

@keyframes crossFade {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

/* Efecto hover iconos del footer */
.social-icon:hover { 
    color: var(--patagonia-blue); 
    transform: scale(1.1); 
    transition: all 0.3s; 
}