{HEADER}
<div id="hero" class="d-flex align-items-end">

    <div style="margin-bottom: 50px; margin-top:5px; height: 150px; background: linear-gradient(269.35deg, rgba(228,251,248,0.9) 0%, #98D7CF 80%, rgba(175,230,223,0.85) 100%);" data-aos="fade-up" data-aos-delay="100">
        <div class="row">
            <div class="col-md-6 text-center align-middle" style="height: 145px;">
                <p class="scrollto roboto-thin m-0 py-4" style="color: #ffffff; font-size: 75px; line-height: 88px; text-align: center;">
                    tienda</p>
            </div>
            <div class="col-md-6 text-center align-middle">
                <div style="box-sizing: border-box; height: 100px; width: 1px; border: 1px solid #808080; float: left; margin-top: 20px;">
                </div>
                <p class="scrollto roboto-light m-0 py-4" style="color: #333333; font-size: 18px; line-height: 24px; text-align: justify; padding-left: 4rem; padding-right: 9rem;">
                    Encuentra toda la oferta de nuestro restaurante a domicilio. Platos individuales, postres, bebidas y todo lo que necesites para hacer de tus comidas un verdadero placer.
                </p>
            </div>
        </div>
    </div>

</div>

<main id="main">
    <section class="pt-5 pb-2" style="background-color: #ffffff;">
        <div class="container aos-init aos-animate" data-aos="fade-up">

            <div style="text-align: center;">
                <ul id="categorias" class="nav justify-content-center">
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate active" aria-current="page" href="#">Plato</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" href="#">Cremas/Sopas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link tab-cate" href="#">Ensalada</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" href="#">Postre</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" style="" href="#">Bebida</a>
                    </li>
                </ul>
            </div>
            <div class="line-cate mb-5"></div>
            <div class="row mt-5 mb-4">
                <div class="col-md-9">
                    <span class="roboto-light" style="font-size: 14px; color: #333333;">1-24 de 27 resultados</span>
                </div>
                <div class="col-md-3">
                    <select name="department" id="department" class="form-select roboto-light" style="font-size: 11px; color: #111111; background-color: #FBFBFB; text-align-last:center; ">
                        <option value="">Ordenar por</option>
                        <option value="Department 1">Destacados</option>
                        <option value="Department 1">Ordendos</option>
                    </select>
                </div>
            </div>

            <div id="divFilas" class="row">
                {FILAS}
            </div>

            <div class="text-center mt-3 mb-5">
                <div class="row">
                    <div class="col-md-3">
                        <!---- >
                        <ul class="pagination justify-content-center">
                            <li class="page-item"><a class="page-link" href="#">&laquo; Anterior</a></li>
                        </ul>
                        <!---->
                    </div>
                    <div class="col-md-6">
                        <ul class="pagination justify-content-center">
                            <!--/paginas-->
                            <li class="page-item {ACTIVE}"><a class="page-link primary" href="/tienda-pag-{NUM}">{NUM}</a>
                            </li>
                            <!--paginas/-->
                        </ul>

                    </div>
                    <div class="col-md-3">
                        <!---- >
                        <ul class="pagination justify-content-center">
                            <li class="page-item"><a class="page-link" href="#">Siguiente &raquo;</a></li>
                        </ul>
                        <!---->
                    </div>
                </div>
            </div>

        </div>
    </section>

    <section class="py-2">
        <div class="container aos-init aos-animate" data-aos="fade-up">
            <div class="row">
                <div class="col-md-12 mb-1">
                    <div class="container px-5 py-3" style="background: linear-gradient(180deg, #FFF 0%, #F6F6F6 52%, #F2F2F2 100%); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.25);">
                        <h3 class="mt-4 mb-0" style="color: #4F4F4F; font-family: 'Roboto Light', arial; font-size: 20px; ">
                            Productos seleccionados</h3>
                        <div class="mt-0 mb-3" style="height: 6px; background-image: url(/assets/img/separador.png); background-repeat: no-repeat; background-size: 100% 100%;">
                        </div>
                        <div id="divSeleccionados">
                            {SELECCIONADOS}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>
<!-- End #main -->

{FOOTER}