/* ===== MARGARITA Premium Design System - World Class UI ===== */

/* Enhanced CSS Variables */
:root {
    /* Premium Gold Palette */
    --gold-50: #FDF8E8;
    --gold-100: #F9EDCC;
    --gold-200: #F3DBA0;
    --gold-300: #E8C56E;
    --gold-400: #D4A84A;
    --gold-500: #C9A96E;
    --gold-600: #B8926A;
    --gold-700: #9A7750;
    --gold-800: #7D5F3F;
    --gold-900: #614A31;

    /* Rose Gold Palette */
    --rose-50: #FFF5F6;
    --rose-100: #FFE8EA;
    --rose-200: #FFD5D9;
    --rose-300: #F5B5BA;
    --rose-400: #E8A0A6;
    --rose-500: #E8B4B8;
    --rose-600: #D4A5A5;

    /* Neutral Premium */
    --neutral-50: #FAFAFA;
    --neutral-100: #F5F5F5;
    --neutral-200: #E8E8E8;
    --neutral-800: #2D2D2D;
    --neutral-900: #1A1A1A;

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(201, 169, 110, 0.15);

    /* Premium Gradients */
    --gradient-gold: linear-gradient(135deg, #C9A96E 0%, #E8D5B7 50%, #C9A96E 100%);
    --gradient-luxury: linear-gradient(135deg, #1A1A1A 0%, #3D3D3D 50%, #1A1A1A 100%);
    --gradient-rose-gold: linear-gradient(135deg, #E8B4B8 0%, #C9A96E 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

    /* Premium Shadows */
    --shadow-glow: 0 0 40px rgba(201, 169, 110, 0.3);
    --shadow-luxury: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 20px 60px rgba(201, 169, 110, 0.25);

    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ===== Smooth Scrollbar ===== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-gold);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-600);
}

/* ===== Premium Header with Glassmorphism ===== */
.header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition-smooth);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--shadow-luxury) !important;
}

/* ===== Premium Logo Animation ===== */
.logo-img {
    transition: var(--transition-spring) !important;
    filter: drop-shadow(0 5px 20px rgba(201, 169, 110, 0.4)) !important;
}

.logo-img:hover {
    transform: scale(1.08) rotate(-2deg) !important;
    filter: drop-shadow(0 10px 30px rgba(201, 169, 110, 0.6)) !important;
}

/* ===== Enhanced Navigation ===== */
.nav-link {
    position: relative;
    padding: 10px 0 !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--gradient-gold);
    border-radius: 3px;
    transition: var(--transition-bounce);
    transform: translateX(-50%);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 100%;
}

.nav-link:hover {
    color: var(--gold-500) !important;
    transform: translateY(-2px);
}

/* ===== Hero Section Premium ===== */
.hero {
    background: var(--gradient-luxury) !important;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(201, 169, 110, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(232, 180, 184, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(201, 169, 110, 0.2) 0%, transparent 50%);
    animation: heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Floating Particles Effect */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(201, 169, 110, 0.4), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(232, 180, 184, 0.4), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(201, 169, 110, 0.4), transparent);
    background-size: 200px 200px;
    animation: particleFloat 20s linear infinite;
    pointer-events: none;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-100%) rotate(360deg);
    }
}

.hero-logo-img {
    animation: floatPremium 6s ease-in-out infinite !important;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 60px rgba(201, 169, 110, 0.4)) !important;
}

@keyframes floatPremium {

    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) scale(1.02) rotate(1deg);
    }

    50% {
        transform: translateY(-8px) scale(1.01) rotate(0deg);
    }

    75% {
        transform: translateY(-20px) scale(1.03) rotate(-1deg);
    }
}

.hero-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(201, 169, 110, 0);
    }
}

.hero h1 {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    animation: titleReveal 1s ease-out;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.hero h1 span {
    background: var(--gradient-rose-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Premium Buttons ===== */
.btn {
    position: relative;
    overflow: hidden;
    transition: var(--transition-spring) !important;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-shimmer);
    transition: 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--white) !important;
    color: var(--gold-600) !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.3) !important;
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(37, 211, 102, 0.4) !important;
}

/* ===== Premium Product Cards ===== */
.product-card {
    background: var(--white);
    border-radius: 24px !important;
    overflow: hidden;
    position: relative;
    transition: var(--transition-spring) !important;
    border: 1px solid rgba(201, 169, 110, 0.1);
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-gold);
    opacity: 0;
    transition: var(--transition-smooth);
}

.product-card:hover {
    transform: translateY(-15px) scale(1.02) !important;
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--gold-300);
}

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

.product-image {
    position: relative;
    overflow: hidden;
}

.product-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.1) 100%);
    opacity: 0;
    transition: var(--transition-smooth);
}

.product-card:hover .product-image::after {
    opacity: 1;
}

.product-card:hover .product-image img {
    transform: scale(1.1) !important;
}

.product-badge {
    background: var(--gradient-gold) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(201, 169, 110, 0.3);
}

.product-actions {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%) !important;
    padding: 30px 15px 20px !important;
}

.action-btn {
    width: 45px !important;
    height: 45px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-bounce) !important;
}

.action-btn:hover {
    background: var(--gold-500) !important;
    color: var(--white) !important;
    transform: scale(1.2) rotate(5deg) !important;
    border-color: var(--gold-500);
}

.product-name {
    font-size: 1.3rem !important;
    transition: var(--transition-smooth);
}

.product-name:hover {
    color: var(--gold-500) !important;
}

.product-price {
    font-size: 1.4rem !important;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Section Headers Premium ===== */
.section-badge {
    background: var(--gradient-gold) !important;
    padding: 8px 24px !important;
    font-size: 0.75rem !important;
    letter-spacing: 2px;
    box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.section-header h2 {
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-gold);
    border-radius: 4px;
}

/* ===== Banner Categories Premium ===== */
.banner-item {
    border-radius: 24px !important;
    transition: var(--transition-spring) !important;
}

.banner-item:hover {
    transform: translateY(-15px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25) !important;
}

.banner-overlay {
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.85) 100%) !important;
}

.banner-content h3 {
    font-size: 2rem !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.banner-link {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Benefits Section Premium ===== */
.benefits-section {
    background: var(--gradient-luxury) !important;
    position: relative;
    overflow: hidden;
}

.benefits-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(201, 169, 110, 0.1) 0%, transparent 50%);
    animation: benefitGlow 10s linear infinite;
}

@keyframes benefitGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.benefit-card {
    position: relative;
    z-index: 1;
    padding: 40px 30px !important;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-smooth);
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
    border-color: rgba(201, 169, 110, 0.3);
}

.benefit-card i {
    font-size: 3rem !important;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 25px !important;
}

/* ===== Occasions Premium ===== */
.occasion-banner {
    border-radius: 24px !important;
    transition: var(--transition-spring) !important;
    position: relative;
    overflow: hidden;
}

.occasion-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: blur(0);
    transition: var(--transition-smooth);
}

.occasion-banner:hover {
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.occasion-banner:hover::before {
    filter: blur(5px) brightness(1.1);
}

.occasion-banner-content {
    position: relative;
    z-index: 1;
}

.occasion-banner-content i {
    font-size: 3.5rem !important;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ===== Footer Premium ===== */
.footer {
    background: var(--gradient-luxury) !important;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-gold);
}

.social-links a {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-bounce) !important;
}

.social-links a:hover {
    background: var(--gold-500) !important;
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 10px 30px rgba(201, 169, 110, 0.4);
}

/* ===== WhatsApp Float Premium ===== */
.whatsapp-float {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    box-shadow: 0 5px 30px rgba(37, 211, 102, 0.5) !important;
    transition: var(--transition-bounce) !important;
}

.whatsapp-float:hover {
    transform: scale(1.15) rotate(10deg) !important;
    box-shadow: 0 10px 40px rgba(37, 211, 102, 0.6) !important;
}

/* ===== Cart Sidebar Premium ===== */
.cart-sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid var(--glass-border);
}

/* ===== Scroll Reveal Animations ===== */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Premium Title Decorations ===== */
.premium-title {
    position: relative;
}

.premium-title::before,
.premium-title::after {
    content: '✦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-500);
    font-size: 1rem;
    opacity: 0.6;
}

.premium-title::before {
    left: -30px;
}

.premium-title::after {
    right: -30px;
}

/* ===== Loading Shimmer Effect ===== */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmerEffect 2s infinite;
}

@keyframes shimmerEffect {
    100% {
        left: 100%;
    }
}

/* ===== Responsive Enhancements ===== */
@media (max-width: 768px) {
    .hero::after {
        background-size: 100px 100px;
    }

    .product-card:hover {
        transform: translateY(-8px) !important;
    }

    .banner-item:hover {
        transform: translateY(-8px) !important;
    }
}