/* Artistic Upgrade - Enhanced Visual Experience */

:root {
    /* 🎨 Santiago's Palette - Earthy & Artistic */
    --art-marfil: #FDFBF7;    /* Marfil - Backgrounds, Light Text */
    --art-ocre: #C9A227;      /* Ocre - Accents, Borders */
    --art-mostaza: #E1AD01;   /* Mostaza - Highlights, Buttons */
    --art-teja: #C05838;      /* Teja - Secondary Actions */
    --art-terracota: #E2725B; /* Terracota - Soft Accents, Gradients */
    --art-marron: #5D4037;    /* Marrón - Primary Text, Footer, Strong Elements */

    /* Derived Colors */
    --art-primary: var(--art-marron);
    --art-secondary: var(--art-teja);
    --art-accent: var(--art-mostaza);
    --art-bg-light: var(--art-marfil);
    
    /* Gradients */
    --art-bg-gradient: linear-gradient(135deg, var(--art-marfil) 0%, #F0EAD6 100%); /* Soft Ivory Gradient */
    --art-hero-gradient: linear-gradient(135deg, var(--art-marron) 0%, var(--art-teja) 100%); /* Strong Earthy Gradient */
    --art-accent-gradient: linear-gradient(45deg, var(--art-mostaza), var(--art-ocre));
    
    /* Shadows */
    --shadow-soft: 0 10px 20px rgba(93, 64, 55, 0.1); /* Brownish shadow */
    --shadow-deep: 0 15px 30px rgba(93, 64, 55, 0.2);
    --shadow-neumorphic: 9px 9px 16px rgba(93, 64, 55, 0.15), -9px -9px 16px rgba(255,255,255, 0.8);
}

/* Global Overrides for the new Palette */
body {
    color: var(--art-marron);
    background-color: var(--art-marfil);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--art-marron);
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background: var(--art-accent-gradient); /* Using Gradient */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(225, 173, 1, 0.4); /* Mustard glow */
}

.whatsapp-icon {
    width: 35px;
    height: 35px;
    fill: white;
}

/* Enhanced Shadows & Gradients */
.hero {
    background: var(--art-hero-gradient) !important; 
    color: var(--art-marfil) !important;
}

.hero h1, .hero p, .hero .hero-subtitle {
    color: var(--art-marfil) !important;
}

/* Buttons Upgrade */
.btn-primary, .cta-button {
    background: var(--art-teja) !important;
    color: white !important;
    border: none !important;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover, .cta-button:hover {
    background: var(--art-terracota) !important;
    transform: translateY(-2px);
}

.card, .gallery-item {
    background: white;
    border: 1px solid rgba(93, 64, 55, 0.1);
    box-shadow: var(--shadow-deep) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover, .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(93, 64, 55, 0.25) !important;
    border-color: var(--art-ocre);
}

/* Social Links in Nav */
.nav-social-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--art-teja); /* Teja for social icon */
    font-weight: 600;
}

.nav-social-link:hover {
    color: var(--art-mostaza);
}

.nav-social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Navbar overrides */
.navbar {
    background: rgba(253, 251, 247, 0.95) !important; /* Marfil with opacity */
}

.nav-menu a {
    color: var(--art-marron) !important;
}

.nav-menu a:hover {
    color: var(--art-teja) !important;
}

/* =========================================
   🎨 Gallery Specific Overrides
   ========================================= */
.gallery {
    background-color: var(--art-marfil);
}

.gallery-filter .filter-btn {
    color: var(--art-marron);
    border: 1px solid var(--art-ocre);
    background: transparent;
    transition: all 0.3s ease;
}

.gallery-filter .filter-btn.active,
.gallery-filter .filter-btn:hover {
    background: var(--art-teja);
    color: white;
    border-color: var(--art-teja);
    box-shadow: var(--shadow-soft);
}

.gallery-item {
    border: 1px solid rgba(201, 162, 39, 0.3); /* Ocre sutil */
}

.gallery-item:hover {
    border-color: var(--art-mostaza);
}

/* =========================================
   🎮 Game Specific Overrides (Memory & Quiz)
   ========================================= */
.unified-memory-game {
    background-color: var(--art-marfil);
}

/* Card Back - The "Hidden" State */
.card-back {
    background: var(--art-hero-gradient) !important;
    border: 2px solid var(--art-ocre) !important;
    box-shadow: var(--shadow-soft) !important;
}

.card-back::before {
    /* Subtle texture overlay */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%) !important;
}

/* Card Front - The "Revealed" State */
.card-front {
    background: white !important;
    border: 1px solid var(--art-marron) !important;
}

/* Matched State - Success! */
.memory-card.matched .card-front {
    border: 3px solid var(--art-mostaza) !important;
    box-shadow: 0 0 20px rgba(225, 173, 1, 0.4) !important; /* Mustard Glow */
}

/* Quiz Panel */
.quiz-live-panel {
    background: var(--art-marron) !important;
    border: 1px solid var(--art-ocre) !important;
    color: var(--art-marfil) !important;
}

.quiz-live-panel .streak {
    color: var(--art-mostaza) !important;
}