/* Skmei Reloj - Prestige Template - Custom Styles */

body {
    font-family: 'Open Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Prestige palette: navy + gold */
.bg-navy { background-color: #0f172a; }
.bg-navy-light { background-color: #1e293b; }
.bg-gold { background-color: #d4a853; }
.bg-gold-dark { background-color: #b8860b; }
.text-gold { color: #d4a853; }
.text-gold-dark { color: #b8860b; }
.border-gold { border-color: #d4a853; }

#header {
    background-color: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#header.scrolled {
    background-color: rgba(15, 23, 42, 0.98);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
}

#mobile-menu {
    transition: all 0.3s ease-in-out;
}

.hero-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.3));
}

.category-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: fadeUp 0.5s ease-out forwards;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid #d4a853;
    outline-offset: 2px;
}

::selection {
    background-color: #d4a853;
    color: #0f172a;
}

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