<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>La Victoria | Galeria de Sabores - Image Box Collection</title>
    <!-- Google Fonts: Lora (serif elegan) & Berkshire Swash (aksen vintage) -->
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Berkshire+Swash&display=swap" rel="stylesheet">
    <!-- Font Awesome 6 (free icons) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #fffbf5;  /* fondo suave cálido */
            font-family: 'Lora', serif;
            color: #4a2c1a;
            line-height: 1.5;
        }

        /* contenedor general similar al estilo de lavictoriapan */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* header sencillo pero evocador */
        .site-header {
            text-align: center;
            padding: 48px 0 32px;
            border-bottom: 1px solid #f0e2d4;
            margin-bottom: 48px;
        }

        .logo-area img {
            max-height: 90px;
            width: auto;
            margin-bottom: 16px;
        }

        .logo-area h1 {
            font-family: 'Berkshire Swash', cursive;
            font-size: 2.6rem;
            color: #764c24;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .logo-area p {
            font-size: 1rem;
            color: #a16b3a;
            font-weight: 500;
            border-top: 1px dashed #e6cfb5;
            display: inline-block;
            padding-top: 10px;
        }

        /* breadcrumb sutil */
        .breadcrumb {
            background: transparent;
            padding: 0 0 20px 0;
            font-size: 0.9rem;
            color: #a97c56;
        }
        .breadcrumb a {
            color: #764c24;
            text-decoration: none;
            font-weight: 500;
        }
        .breadcrumb a:hover {
            text-decoration: underline;
        }

        /* Título principal de la galería "image-box" */
        .gallery-header {
            text-align: center;
            margin-bottom: 56px;
        }
        .gallery-header h2 {
            font-family: 'Berkshire Swash', cursive;
            font-size: 2.5rem;
            color: #4a221a;
            margin-bottom: 12px;
            position: relative;
            display: inline-block;
        }
        .gallery-header h2:after {
            content: '';
            display: block;
            width: 70px;
            height: 3px;
            background: #e0a45e;
            margin: 12px auto 0;
            border-radius: 4px;
        }
        .gallery-header .sub {
            font-size: 1.1rem;
            color: #7e5a40;
            max-width: 650px;
            margin: 20px auto 0;
            font-style: italic;
        }

        /* ------- IMAGE BOX GRID (estilo artesanal) ------- */
        .image-box-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 40px 30px;
            margin-bottom: 70px;
        }

        /* Card image-box */
        .image-card {
            background: #ffffff;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            text-align: center;
            cursor: default;
            border: 1px solid #f9efE5;
        }
        .image-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 30px -12px rgba(100, 55, 25, 0.15);
            border-color: #e0a45e;
        }

        .image-wrapper {
            position: relative;
            overflow: hidden;
            background: #faf2ea;
        }
        .image-wrapper img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            transition: transform 0.5s ease;
            display: block;
        }
        .image-card:hover .image-wrapper img {
            transform: scale(1.03);
        }

        /* etiqueta de oferta o destacado (opcional) */
        .badge-offer {
            position: absolute;
            top: 16px;
            right: 16px;
            background: #e0a45e;
            color: #4a221a;
            font-size: 0.7rem;
            font-weight: bold;
            padding: 5px 12px;
            border-radius: 40px;
            font-family: 'Lora', sans-serif;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 2;
        }

        .card-content {
            padding: 22px 20px 26px;
        }
        .card-content h3 {
            font-family: 'Berkshire Swash', cursive;
            font-size: 1.7rem;
            font-weight: 400;
            color: #4a221a;
            margin-bottom: 12px;
        }
        .card-content p {
            font-size: 0.95rem;
            color: #6b4c34;
            margin-bottom: 20px;
            line-height: 1.45;
        }
        .btn-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: 1.5px solid #e0a45e;
            padding: 8px 24px;
            border-radius: 40px;
            color: #764c24;
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            transition: 0.25s;
            font-family: 'Lora', sans-serif;
            letter-spacing: 0.5px;
        }
        .btn-link i {
            font-size: 0.8rem;
            transition: transform 0.2s;
        }
        .btn-link:hover {
            background: #e0a45e;
            color: #fff;
            border-color: #c98a42;
        }
        .btn-link:hover i {
            transform: translateX(4px);
        }

        /* sección adicional tipo "nuestros favoritos" o cita */
        .extra-banner {
            background: #fdf5ea;
            border-radius: 36px;
            padding: 48px 32px;
            margin: 30px 0 70px;
            text-align: center;
            border: 1px solid #f2e2d2;
        }
        .extra-banner i {
            font-size: 2.4rem;
            color: #e0a45e;
            margin-bottom: 16px;
        }
        .extra-banner h3 {
            font-family: 'Berkshire Swash', cursive;
            font-size: 2rem;
            color: #4a221a;
        }
        .extra-banner p {
            max-width: 600px;
            margin: 12px auto 0;
            color: #5e3a24;
        }

        /* footer estilo consistente con el sitio original */
        .footer-custom {
            background: #f5ede4;
            padding: 48px 0 32px;
            margin-top: 40px;
            border-top: 1px solid #e9dccc;
            font-size: 0.85rem;
            color: #634b36;
        }
        .footer-inner {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }
        .footer-copy {
            font-family: 'Lora', serif;
        }
        .social-icons a {
            color: #8b694e;
            margin: 0 10px;
            font-size: 1.2rem;
            transition: color 0.2s;
        }
        .social-icons a:hover {
            color: #e0a45e;
        }

        /* responsive */
        @media (max-width: 768px) {
            .container {
                padding: 0 20px;
            }
            .image-box-grid {
                gap: 30px;
            }
            .gallery-header h2 {
                font-size: 2rem;
            }
            .card-content h3 {
                font-size: 1.4rem;
            }
            .site-header {
                padding: 28px 0 20px;
            }
        }
        @media (max-width: 480px) {
            .image-wrapper img {
                height: 220px;
            }
            .btn-link {
                padding: 6px 20px;
            }
        }
    </style>
</head>
<body>

<div class="site-wrapper">
    <header class="site-header">
        <div class="container">
            <div class="logo-area">
                <!-- logo simulado, similar al estilo de La Victoria -->
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23e0a45e'/%3E%3Ctext x='50' y='67' font-size='40' text-anchor='middle' fill='%234a221a' font-family='monospace' font-weight='bold'%3ELV%3C/text%3E%3C/svg%3E"
                     alt="La Victoria Logo" style="background: #f9e6d8; border-radius: 60px; padding: 6px; width: 85px;">
                <h1>La Victoria</h1>
                <p>Panadería & Café • Sabores con tradición</p>
            </div>
        </div>
    </header>

    <div class="container">
        <!-- breadcrumb inspirado en la navegación de la web original -->
        <div class="breadcrumb">
            <a href="#">Inicio</a> <span style="margin:0 6px">/</span> 
            <span style="color:#764c24; font-weight:500;">Image Box — Colección Artesanal</span>
        </div>

        <div class="gallery-header">
            <h2>Nuestros Tesoros en Imagen</h2>
            <div class="sub">Cada imagen cuenta la historia de ingredientes frescos, recetas heredadas y el amor por la panadería mexicana y salvadoreña.</div>
        </div>

        <!-- IMAGE BOX GRID (productos/experiencias destacadas) -->
        <div class="image-box-grid">
            <!-- tarjeta 1: Pan Dulce tradicional -->
            <div class="image-card">
                <div class="image-wrapper">
                    <img src="https://images.pexels.com/photos/1639557/pexels-photo-1639557.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Pan dulce mexicano con concha y orejas">
                    <div class="badge-offer"><i class="fas fa-star"></i> Favorito</div>
                </div>
                <div class="card-content">
                    <h3>Concha & Orejas</h3>
                    <p>Nuestras tradicionales conchas de piloncillo y orejas hojaldradas, suaves por dentro y crujientes por fuera. Acompañadas con chocolate de metate.</p>
                    <a href="#" class="btn-link">Descubrir receta <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>

            <!-- tarjeta 2: Pastelería fina -->
            <div class="image-card">
                <div class="image-wrapper">
                    <img src="https://images.pexels.com/photos/1126359/pexels-photo-1126359.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Pastel de frutas y crema">
                </div>
                <div class="card-content">
                    <h3>Pastel Tres Leches</h3>
                    <p>Esponjoso bizcocho bañado en tres leches, cubierto con merengue tostado y nuez. Un clásico que endulza las celebraciones.</p>
                    <a href="#" class="btn-link">Ver detalles <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>

            <!-- tarjeta 3: Café de especialidad -->
            <div class="image-card">
                <div class="image-wrapper">
                    <img src="https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Café de grano artesanal">
                    <div class="badge-offer"><i class="fas fa-mug-hot"></i> Recomendado</div>
                </div>
                <div class="card-content">
                    <h3>Café de Origen</h3>
                    <p>Granos mexicanos y salvadoreños tostados a la perfección. Aromas intensos, sabor equilibrado y cuerpo aterciopelado.</p>
                    <a href="#" class="btn-link">Explorar blends <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>

            <!-- tarjeta 4: Galletas artesanales polvorón -->
            <div class="image-card">
                <div class="image-wrapper">
                    <img src="https://images.pexels.com/photos/5706219/pexels-photo-5706219.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Galletas polvorón y nuez">
                </div>
                <div class="card-content">
                    <h3>Polvorones Caseros</h3>
                    <p>Galletas de manteca, textura arenosa que se deshace en tu boca. Sabores a canela, nuez y pepita. El acompañante perfecto para el café.</p>
                    <a href="#" class="btn-link">Saber más <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>

            <!-- tarjeta 5: Bollos y empanadas -->
            <div class="image-card">
                <div class="image-wrapper">
                    <img src="https://images.pexels.com/photos/1598662/pexels-photo-1598662.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Empanadas de piña y bollos">
                    <div class="badge-offer">¡Nuevo!</div>
                </div>
                <div class="card-content">
                    <h3>Empanadas de Piña</h3>
                    <p>Rellenas de piña caramelizada, masa dorada y espolvoreadas con azúcar. Un bocado dulce que evoca los mercados tradicionales.</p>
                    <a href="#" class="btn-link">Ordenar ahora <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>

            <!-- tarjeta 6: Pan de muerto y temporada -->
            <div class="image-card">
                <div class="image-wrapper">
                    <img src="https://images.pexels.com/photos/461431/pexels-photo-461431.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Pan de muerto tradicional">
                </div>
                <div class="card-content">
                    <h3>Pan de Muerto</h3>
                    <p>Suave, aromático con azahar y ajonjolí. Honramos la tradición mexicana durante todo el año con este pan emblemático.</p>
                    <a href="#" class="btn-link">Reservar <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <!-- sección adicional inspirada en el concepto "image box" con cita de experiencia -->
        <div class="extra-banner">
            <i class="fas fa-heart"></i>
            <h3>El placer está en cada detalle</h3>
            <p>En La Victoria, cada imagen representa una historia de familia, masa madre y el auténtico sabor de México y El Salvador. Déjate envolver por la calidez de nuestro horno.</p>
        </div>
    </div>

    <footer class="footer-custom">
        <div class="container">
            <div class="footer-inner">
                <div class="footer-copy">
                    <i class="far fa-copyright"></i> 2025 Panadería La Victoria — 1434 Castle Dr, Garland, TX 75040
                </div>
                <div class="social-icons">
                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="#" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                </div>
                <div class="footer-copy">
                    <i class="fas fa-phone-alt"></i> (214) 854-0661 | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f262129200f232e39262c3b203d262e3f2e21612c2022">[email&#160;protected]</a>
                </div>
            </div>
            <div style="text-align: center; margin-top: 28px; font-size: 0.75rem; color:#a77e5a;">
                Horario: Lun - Vie 07:00 a 20:00 • Sáb - Dom 07:00 a 17:00
            </div>
        </div>
    </footer>
</div>

<!-- pequeño script para dar efecto hover tooltip o interacción mínima (opcional, solo estética) -->
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    // Agrega un console log sutil para mostrar la inspiración de lavictoriapan.com
    console.log("Image Box — Estilo La Victoria | Panadería con tradición y calidez");
    // Permite que los botones tengan un comportamiento demo sin recargar (opcional)
    const btns = document.querySelectorAll('.btn-link');
    btns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            // efecto suave para simular interacción sin salir de la página
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-pulse"></i> Próximamente...';
            setTimeout(() => {
                btn.innerHTML = originalText;
            }, 1200);
        });
    });
</script>
</body>
</html>