/* Configuración de Scroll Sticky y Snap Smooth */
.snap-section {
    scroll-snap-align: start;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-scroll {
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
    scrollbar-width: none;
    /* Firefox */
}

#main-scroll::-webkit-scrollbar {
    display: none;
}

/* Deformación elástica de los puntos de navegación */
.nav-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.7s cubic-bezier(0.5, 1.8, 0.5, 1);
}

.nav-dot.active {
    background: #C5A059;
    transform: scaleY(3.5) scaleX(0.4);
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}

/* Diseño de botones responsivo (Itinerario arriba, otros abajo alineados) */
.btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
}

.btn-main {
    grid-column: span 2;
}

@media (min-width: 768px) {
    .btn-grid {
        display: flex;
        justify-content: center;
        gap: 1rem;
        width: auto;
    }

    .btn-main {
        grid-column: auto;
    }
}

/* Transición sticky suave del contenido al entrar en vista */
.hero-content {
    opacity: 1;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.snap-section.active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Custom Scrollbar for Contact Section */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #C5A059;
    border-radius: 4px;
}