:root {
            --primary: #D8C7FF; /* lila pastel */
            --secondary: #FFC4E1; /* rosado suave */
            --accent: #AEE6E6; /* agua turquesa leve */
            --details: #F3D5C5; /* golden-rose */
            --gold: #FFD700;
            --white: #FFFFFF;
            --text-dark: #4f4c52;
            --font-title: 'Poppins', sans-serif;
            --font-body: 'Montserrat', sans-serif;
        }

        body {
            font-family: var(--font-body);
            background-color: var(--white);
            color: var(--text-dark);
            font-size: 16px;
            line-height: 1.7;
            font-weight: 300;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-title);
            font-weight: 600;
            color: var(--primary);
        }
        
        .section-title {
            color: var(--primary);
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 40px;
        }

        .section-title::after {
            content: '✨';
            position: absolute;
            color: var(--gold);
            font-size: 1.5rem;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            text-shadow: 0 0 10px var(--gold);
        }

        /* Botones Personalizados */
        .btn-primary-custom {
            background: linear-gradient(45deg, var(--primary), var(--accent));
            border: none;
            color: var(--text-dark);
            font-family: var(--font-title);
            padding: 14px 32px;
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            font-weight: 600;
        }

        .btn-primary-custom:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 10px 25px rgba(174, 230, 230, 0.5);
            color: var(--text-dark);
        }
        
        .btn-secondary-custom {
            background-color: transparent;
            border: 2px solid var(--secondary);
            color: var(--secondary);
            font-family: var(--font-title);
            padding: 12px 30px;
            border-radius: 50px;
            transition: all 0.4s ease;
            font-weight: 600;
        }

        .btn-secondary-custom:hover {
            background-color: var(--secondary);
            color: var(--white);
            border-color: var(--secondary);
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(255, 196, 225, 0.5);
        }
        
        /* Navbar y Carrito */
        .navbar {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: background-color 0.3s;
        }
        .navbar-brand {
            font-family: var(--font-title);
            color: var(--primary);
            font-weight: 600;
        }
        .cart-icon {
            position: relative;
            cursor: pointer;
        }
        .cart-count {
            position: absolute;
            top: -8px;
            right: -12px;
            background-color: var(--secondary);
            color: white;
            border-radius: 50%;
            padding: 2px 7px;
            font-size: 0.75rem;
            font-weight: bold;
            border: 2px solid white;
        }

        /* Hero Section */        #hero {
            background-image: url('https://www.transparenttextures.com/patterns/cosmic.png'), linear-gradient(135deg, #d8c7ff6b, #ffc4e15e);
            background-size: auto, cover;
            color: var(--text-dark);
            padding: 120px 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        #hero h1 {
            font-size: 2.8rem;
            font-weight: 600;
            color: var(--primary);
            text-shadow: 2px 2px 10px rgba(255,255,255,0.5);
        }
        #hero p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 20px auto 40px;
        }

        /* Floating Crystal Animation */
        .floating-crystal {
            position: absolute;
            opacity: 0.7;
            animation: float 12s ease-in-out infinite;
        }
        #crystal1 { top: 15%; left: 10%; width: 150px; animation-duration: 10s; }
        #crystal2 { top: 70%; right: 5%; width: 180px; animation-duration: 15s; }
        #crystal3 { top: 20%; right: 20%; width: 50px; animation-duration: 8s; }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(15deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        /* Sobre Mí Section */
        #sobre-mi .profile-pic {
            width: 220px;
            height: 220px;
            border-radius: 50%;
            object-fit: cover;
            border: 6px solid var(--white);
            box-shadow: 0 10px 40px rgba(216, 199, 255, 0.6);
        }
        .social-icons a {
            font-size: 2.2rem;
            color: var(--primary);
            transition: all 0.3s ease;
            margin: 0 10px;
        }
        .social-icons a:hover {
            color: var(--secondary);
            transform: scale(1.2) rotate(5deg);
        }

        /* Tarjetas Generales */
        .custom-card {
            border: none;
            border-radius: 20px;
            transition: all 0.4s ease;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.07);
            background-color: white;
        }
        .custom-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(216, 199, 255, 0.4);
        }
        .card-icon {
            font-size: 2.5rem;
            color: var(--details);
            text-shadow: 0 0 15px var(--details);
        }

        /* Productos */
        .product-card .card-img-top {
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }
        .product-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            background: linear-gradient(45deg, var(--gold), var(--details));
            color: white;
            font-size: 0.8rem;
            padding: 5px 12px;
            border-radius: 50px;
            font-weight: bold;
        }

        /* Testimonios */
        #testimonios {
            background-image: url("https://www.transparenttextures.com/patterns/amethyst.png"), linear-gradient(to top, #ffffff, #d8c7ff44);
        }
        .testimonial-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
        }
        .rating-stars {
            color: var(--gold);
        }

        /* Contacto */
        #contacto {
            background-color: var(--accent);
            background-image: linear-gradient(135deg, #aeefe688, #d8c7ff88);
        }
        
        /* Footer */
        footer {
            background-color: #fefcff;
        }
        .footer-logo {
            font-family: var(--font-title);
            color: var(--primary);
            font-size: 1.5rem;
        }