/* Estilos personalizados para Barbería Jon Jones */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Montserrat:wght@300;400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');

:root {
    --gold-primary: #d4af37;
    --gold-light: #f5d77f;
    --gold-dark: #aa820a;
    --dark-bg: #09090b;
    --dark-surface: #121217;
    --dark-card: #18181f;
    --dark-border: #262633;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--dark-bg);
    color: #f3f4f6;
    overflow-x: hidden;
}

.font-championship {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
}

.font-punchy {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.03em;
}

/* Gradientes Dorados de Campeón */
.gold-gradient-text {
    background: linear-gradient(135deg, #fff2cc 0%, #d4af37 50%, #aa820a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
    background: linear-gradient(135deg, #f3cf7a 0%, #d4af37 50%, #997300 100%);
}

.gold-gradient-border {
    border-image: linear-gradient(to right, #d4af37, #f5d77f, #aa820a) 1;
}

/* Efectos de Resplandor Glow */
.gold-glow {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);
}

.gold-glow-hover:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    border-color: rgba(212, 175, 55, 0.8);
    transform: translateY(-3px);
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #09090b;
}
::-webkit-scrollbar-thumb {
    background: #272732;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #d4af37;
}

/* Animaciones */
@keyframes pulseSubtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
}

.animate-pulse-subtle {
    animation: pulseSubtle 3s infinite ease-in-out;
}

/* Tarjetas de Selección en el Agendador */
.selection-card {
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--dark-border);
    cursor: pointer;
}

.selection-card:hover {
    border-color: rgba(212, 175, 55, 0.6);
    background-color: rgba(26, 26, 35, 0.8);
}

.selection-card.selected {
    border-color: #d4af37;
    background-color: rgba(212, 175, 55, 0.12);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

/* Botón flotante móvil */
.mobile-bottom-bar {
    backdrop-filter: blur(12px);
    background: rgba(14, 14, 18, 0.92);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

/* Transiciones de Modal */
.modal-backdrop {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.85);
}

/* Badge de Campeón */
.badge-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #f5d77f;
}