/* ==========================================================================
   ViajaFácil Consultoría Global - Estilos Principales
   Paleta: #95de90, #cef781, #f7c081, #ff7857, #6b6b6b, #121212
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-surface: #121212;
    --brand-primary: #cef781;
    --brand-secondary: #95de90;
    --brand-accent: #f7c081;
    --brand-alert: #ff7857;
    --brand-muted: #6b6b6b;
}

body {
    background-color: var(--bg-surface);
    color: var(--brand-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

/* Efecto Glassmorphic Avanzado */
.glass-card {
    position: relative;
    background: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(107, 107, 107, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(206, 247, 129, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(206, 247, 129, 0.1);
}

/* Efecto de brillo de cursor dinámico en tarjetas */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(206, 247, 129, 0.06), transparent 40%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.glass-card:hover::before {
    opacity: 1;
}

/* Animaciones y utilidades de interacción */
.interactive-btn {
    transition: all 0.3s ease;
}

.interactive-btn:hover {
    transform: scale(1.02);
}

.nav-item {
    position: relative;
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #cef781;
    transition: width 0.3s ease;
}

.nav-item:hover::after {
    width: 100%;
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #121212;
}

::-webkit-scrollbar-thumb {
    background: #6b6b6b;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cef781;
}