/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 444:4 Unexpected "<"

**/
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Silk & Lotus Atelier - Elegancia Ancestral de la Dinastía Tang</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --color-blanco: #FAFAFA;
            --color-oro: #B8860B;
            --color-rojo: #8B0000;
            --color-jade: #00A86B;
            --color-purpura: #4B0082;
            --color-texto: #333333;
            --color-texto-claro: #666666;
        }

        body {
            font-family: 'Georgia', serif;
            background-color: var(--color-blanco);
            color: var(--color-texto);
            line-height: 1.6;
        }

        /* ===== HEADER ===== */
        header {
            background-color: var(--color-blanco);
            border-bottom: 2px solid var(--color-oro);
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .logo {
            font-size: 28px;
            font-weight: bold;
            color: var(--color-oro);
            text-decoration: none;
            letter-spacing: 2px;
        }

        .logo span {
            color: var(--color-rojo);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        nav a {
            text-decoration: none;
            color: var(--color-texto);
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: var(--color-oro);
        }

        .header-icons {
            display: flex;
            gap: 20px;
            font-size: 18px;
        }

        .header-icons a {
            color: var(--color-texto);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .header-icons a:hover {
            color: var(--color-oro);
        }

        /* ===== HERO SECTION ===== */
        .hero {
            background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(75, 0, 130, 0.05) 100%);
            padding: 100px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .hero h1 {
            font-size: 56px;
            color: var(--color-rojo);
            margin-bottom: 20px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .hero p {
            font-size: 20px;
            color: var(--color-texto-claro);
            margin-bottom: 40px;
            font-style: italic;
        }

        .cta-button {
            display: inline-block;
            background-color: var(--color-rojo);
            color: white;
            padding: 15px 40px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            border-radius: 4px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 2px solid var(--color-rojo);
        }

        .cta-button:hover {
            background-color: transparent;
            color: var(--color-rojo);
        }

        /* ===== BRAND STORY SECTION ===== */
        .brand-story {
            max-width: 1200px;
            margin: 80px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .brand-story-text h2 {
            font-size: 42px;
            color: var(--color-oro);
            margin-bottom: 20px;
            font-weight: 700;
        }

        .brand-story-text p {
            font-size: 16px;
            color: var(--color-texto-claro);
            margin-bottom: 15px;
            line-height: 1.8;
        }

        .brand-story-image {
            background: linear-gradient(135deg, var(--color-purpura), var(--color-jade));
            height: 400px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 120px;
            color: rgba(255, 255, 255, 0.3);
        }

        /* ===== COLLECTIONS SECTION ===== */
        .collections {
            background-color: rgba(184, 134, 11, 0.05);
            padding: 80px 20px;
            text-align: center;
        }

        .collections h2 {
            font-size: 42px;
            color: var(--color-oro);
            margin-bottom: 60px;
            font-weight: 700;
        }

        .collections-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }

        .collection-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .collection-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .collection-image {
            background: linear-gradient(135deg, var(--color-jade), var(--color-purpura));
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
            color: rgba(255, 255, 255, 0.3);
        }

        .collection-info {
            padding: 30px;
        }

        .collection-info h3 {
            font-size: 22px;
            color: var(--color-rojo);
            margin-bottom: 10px;
            font-weight: 700;
        }

        .collection-info p {
            font-size: 14px;
            color: var(--color-texto-claro);
            margin-bottom: 20px;
        }

        .collection-link {
            color: var(--color-oro);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s ease;
        }

        .collection-link:hover {
            color: var(--color-rojo);
        }

        /* ===== FEATURED PRODUCT SECTION ===== */
        .featured-product {
            max-width: 1200px;
            margin: 80px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .featured-product-image {
            background: linear-gradient(135deg, var(--color-rojo), var(--color-oro));
            height: 400px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 120px;
            color: rgba(255, 255, 255, 0.3);
        }

        .featured-product-info h2 {
            font-size: 42px;
            color: var(--color-oro);
            margin-bottom: 20px;
            font-weight: 700;
        }

        .featured-product-info p {
            font-size: 16px;
            color: var(--color-texto-claro);
            margin-bottom: 15px;
            line-height: 1.8;
        }

        .price {
            font-size: 28px;
            color: var(--color-rojo);
            font-weight: 700;
            margin: 30px 0;
        }

        /* ===== TESTIMONIALS SECTION ===== */
        .testimonials {
            background-color: rgba(184, 134, 11, 0.05);
            padding: 80px 20px;
            text-align: center;
        }

        .testimonials h2 {
            font-size: 42px;
            color: var(--color-oro);
            margin-bottom: 60px;
            font-weight: 700;
        }

        .testimonials-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .testimonial-card {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .testimonial-stars {
            color: var(--color-oro);
            font-size: 18px;
            margin-bottom: 15px;
        }

        .testimonial-text {
            font-size: 14px;
            color: var(--color-texto-claro);
            margin-bottom: 15px;
            font-style: italic;
        }

        .testimonial-author {
            font-weight: 700;
            color: var(--color-rojo);
            font-size: 14px;
        }

        /* ===== FOOTER ===== */
        footer {
            background-color: var(--color-purpura);
            color: white;
            padding: 60px 20px 20px;
            margin-top: 80px;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-section h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: var(--color-oro);
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 10px;
        }

        .footer-section a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .footer-section a:hover {
            color: var(--color-oro);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 20px;
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
        }

        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            nav ul {
                gap: 15px;
                font-size: 12px;
            }

            .hero h1 {
                font-size: 36px;
            }

            .hero p {
                font-size: 16px;
            }

            .brand-story,
            .featured-product {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .brand-story-image,
            .featured-product-image {
                height: 300px;
            }

            .collections-grid {
                grid-template-columns: 1fr;
            }

            .hero::before,
            .hero::after {
                font-size: 50px;
            }
        }
    </style>
</head>
<body>
    <!-- HEADER -->
    <header>
        <div class="header-container">
            <a href="#" class="logo">SILK & <span>LOTUS</span></a>
            <nav>
                <ul>
                    <li><a href="#home">Inicio</a></li>
                    <li><a href="#catalog">Catálogo</a></li>
                    <li><a href="#story">Historia</a></li>
                    <li><a href="#contact">Contacto</a></li>
                </ul>
            </nav>
            <div class="header-icons">
                <a href="#search">🔍</a>
                <a href="#cart">🛒</a>
            </div>
        </div>
    </header>

    <!-- HERO SECTION -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>La Elegancia Audaz de la Dinastía Tang</h1>
            <p>Redefinida para Ti</p>
            <a href="#catalog" class="cta-button">Explore Collection</a>
        </div>
    </section>

    <!-- BRAND STORY SECTION -->
    <section class="brand-story" id="story">
        <div class="brand-story-text">
            <h2>Nuestra Historia</h2>
            <p>En <strong>Silk & Lotus Atelier</strong>, creemos que la belleza y el bienestar son actos de empoderamiento. Inspirados por la opulencia y la elegancia de la Dinastía Tang, hemos curado una colección de piezas ancestrales que conectan la sabiduría del pasado con la confianza de la mujer moderna.</p>
            <p>Cada producto en nuestra tienda es una celebración del arte, la naturaleza y la feminidad. Desde peines de sándalo hasta brazaletes con patrón de bambú, cada pieza cuenta una historia de tradición, calidad y belleza.</p>
        </div>
        <div class="brand-story-image">🌸</div>
    </section>

    <!-- COLLECTIONS SECTION -->
    <section class="collections" id="catalog">
        <h2>Our Collections</h2>
        <div class="collections-grid">
            <div class="collection-card">
                <div class="collection-image">💆</div>
                <div class="collection-info">
                    <h3>Sandalwood Rituals</h3>
                    <p>Ancestral massage combs for hair care and wellness.</p>
                    <a href="#" class="collection-link">See Collection →</a>
                </div>
            </div>
            <div class="collection-card">
                <div class="collection-image">✨</div>
                <div class="collection-info">
                    <h3>Imperial Jewerly</h3>
                    <p>Bracelets with bamboo pattern, gold plated.</p>
                    <a href="#" class="collection-link">See Collection →</a>
                </div>
            </div>
            <div class="collection-card">
                <div class="collection-image">🪭</div>
                <div class="collection-info">
                    <h3>Court Accessories</h3>
                    <p>Satin and bamboo fans with chinoiserie floral motifs.</p>
                    <a href="#" class="collection-link">See Collection →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- FEATURED PRODUCT SECTION -->
    <section class="featured-product">
        <div class="featured-product-image">🪭</div>
        <div class="featured-product-info">
            <h2>Satin and bamboo fans with chinoiserie floral motifs.</h2>
            <p><strong>La Historia:</strong> Inspirado en los abanicos de la corte imperial Tang, este accesorio combina la artesanía ancestral con el diseño moderno.</p>
            <p><strong>Beneficios Modernos:</strong> Perfecto para cualquier ocasión, este abanico es tanto un accesorio funcional como una declaración de estilo y elegancia.</p>
            <p class="price">$22.21 USD</p>
            <a href="#" class="cta-button">Añadir al Carrito</a>
        </div>
    </section>

    <!-- TESTIMONIALS SECTION -->
    <section class="testimonials">
        <h2>Lo que Dicen Nuestras Clientas</h2>
        <div class="testimonials-grid">
            <div class="testimonial-card">
                <div class="testimonial-stars">★★★★★</div>
                <p class="testimonial-text">"Los peines de sándalo han transformado mi rutina de cuidado del cabello. Me siento como una emperatriz Tang cada vez que los uso."</p>
                <p class="testimonial-author">- María, 28 años</p>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-stars">★★★★★</div>
                <p class="testimonial-text">"La calidad de los brazaletes es excepcional. Cada pieza es una obra de arte que cuenta una historia de tradición y elegancia."</p>
                <p class="testimonial-author">- Sofia, 35 años</p>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-stars">★★★★★</div>
                <p class="testimonial-text">"Silk & Lotus Atelier no es solo una tienda, es una experiencia. Me encanta la narrativa detrás de cada producto."</p>
                <p class="testimonial-author">- Laura, 22 años</p>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer>
        <div class="footer-container">
            <div class="footer-section">
                <h3>Sobre Nosotros</h3>
                <ul>
                    <li><a href="#">Our Story</a></li>
                    <li><a href="#">Sustainability</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Compra</h3>
                <ul>
                    <li><a href="#">Catalog</a></li>
                    <li><a href="#">Collections</a></li>
                    <li><a href="#">Sales</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Customer Service</h3>
                <ul>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Returns & Refunds</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Follow Us</h3>
                <ul>
                    <li><a href="#">Instagram</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">TikTok</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Silk & Lotus Atelier. Todos los derechos reservados. | Elegancia Ancestral para la Mujer Moderna.</p>
        </div>
    </footer>
</body>
</html>