{HEADER}

<link href="/assets/vendor/carousel/css/style.css" rel="stylesheet" media="all" />
<script src="/assets/vendor/carousel/js/initial.js"></script>
<script src="/assets/vendor/carousel/js/parallax.js"></script>
<script src="/assets/vendor/carousel/js/style.js"></script>

<section class="hero-section" style="position: relative">
    <style>
        .ps_indicators_gray_lg>.carousel-indicators li {
            width: 15px;
            height: 15px;
            border-radius: 50px;
            border-color: #ffffff;
        }
        
        .ps_indicators_gray_lg>.carousel-indicators .active {
            width: 15px;
            height: 15px;
            border-radius: 50px;
            border-color: #ffffff;
            background: #ffffff;
        }
        
        .ps_control_gray_lg .carousel-control {
            background: transparent;
        }
        
        @media only screen and (max-width: 768px) {
            .content {
                padding-left: 10%;
                padding-right: 10%;
            }
            #about {
                left: 1px;
            }
        }
    </style>
    <div id="parallax_075" class="
      carousel
      slide
      ps_indicators_gray_lg ps_control_gray_lg
      thumb_scroll_x
      swipe_x
      ps_easeOutCirc
    " data-ride="carousel" data-pause="hover" data-interval="5000" data-duration="2000">
        <ol class="carousel-indicators">
            <li data-target="#parallax_075" data-slide-to="0" class=""></li>
            <li data-target="#parallax_075" data-slide-to="1" class="active"></li>
            <li data-target="#parallax_075" data-slide-to="2" class=""></li>
            <li data-target="#parallax_075" data-slide-to="3" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item prlx_075_bg_img active active" style="
          background-image: url('/assets/img/portada/carousel/foto_1.jpg');
          transition-duration: 800ms;
        ">
                <div class="prlx_075_slide">
                    <div class="carousel-box p-5">
                        <img class="" src="/assets/img/portada/carousel/mancha.png" alt="" style="position: absolute; top: -50px; left: -60px" data-aos="zoom-in" data-aos-delay="100" />
                        <h2 class="carousel-h2" data-aos="fade-down" data-aos-delay="100">
                            medialuna
                        </h2>
                        <p class="carousel-p px-5" style="color: #333333" data-aos="zoom-in" data-aos-delay="200">
                            Bienvenidos a la nueva web de nuestro restaurante donde podrás encontrar todos los productos y realizar los pedidos de tus menús.
                        </p>
                        <div class="pe-5" style="text-align: right">
                            <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item prlx_075_bg_img next" style="
          background-image: url('/assets/img/portada/carousel/foto_2.jpg');
          transition-duration: 800ms;
        ">
                <div class="prlx_075_slide prlx_075_slide_right">
                    <div class="carousel-box p-5">
                        <img class="" src="/assets/img/portada/carousel/mancha.png" alt="" style="position: absolute; top: -50px; left: -60px" data-aos="zoom-in" data-aos-delay="100" />
                        <h2 class="carousel-h2" data-aos="fade-down" data-aos-delay="100">
                            Menús
                        </h2>
                        <p class="carousel-p px-5" style="color: #333333" data-aos="zoom-in" data-aos-delay="200">
                            Una dieta variada y equilibrada es posible. Descubre nuestro menú diario para comer fuera de casa.
                        </p>
                        <div class="pe-5" style="text-align: right">
                            <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item prlx_075_bg_img" style="
          background-image: url('/assets/img/portada/carousel/foto_3.jpg');
          transition-duration: 800ms;
        ">
                <div class="prlx_075_slide prlx_075_slide_center">
                    <div class="carousel-box p-5">
                        <img class="" src="/assets/img/portada/carousel/mancha.png" alt="" style="position: absolute; top: -50px; left: -60px" data-aos="zoom-in" data-aos-delay="100" />
                        <h2 class="carousel-h2" data-aos="fade-down" data-aos-delay="100">
                            Catering
                        </h2>
                        <p class="carousel-p px-5" style="color: #333333" data-aos="zoom-in" data-aos-delay="200">
                            Deja que hagamos que tus momentos sean aún más especiales. Nuestro servicio de catering se encargará de todo
                        </p>
                        <div class="pe-5" style="text-align: right">
                            <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item prlx_075_bg_img" style="
          background-image: url('/assets/img/portada/carousel/foto_3.jpg');
          transition-duration: 800ms;
        ">
                <div class="prlx_075_slide prlx_075_slide_center">
                    <div class="carousel-box p-5">
                        <img class="" src="/assets/img/portada/carousel/mancha.png" alt="" style="position: absolute; top: -50px; left: -60px" data-aos="zoom-in" data-aos-delay="100" />
                        <h2 class="carousel-h2" data-aos="fade-down" data-aos-delay="100">
                            Tienda
                        </h2>
                        <p class="carousel-p px-5" style="color: #333333" data-aos="zoom-in" data-aos-delay="200">
                            Encuentra en nuestra tienda todos los platos y extras necesarios para hacer de tu comida un placer
                        </p>
                        <div class="pe-5" style="text-align: right">
                            <a href="#about" class="bml scrollto" data-aos="fade-up" data-aos-delay="300">mostrar</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#parallax_075" role="button" data-slide="prev"><span
        class="fa fa-arrow-left"></span></a><a class="right carousel-control" href="#parallax_075" role="button" data-slide="next"><span class="fa fa-arrow-right"></span></a>
    </div>

    <div class="wave">
        <svg height="100%" width="100%" id="svg" viewBox="0 0 1440 500" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150">
      <path
        d="M 0,500 C 0,500 0,250 0,250 C 155.0666666666666,226 310.1333333333332,202 482,218 C 653.8666666666668,234 842.5333333333335,290.00000000000006 1005,302 C 1167.4666666666665,313.99999999999994 1303.7333333333331,282 1440,250 C 1440,250 1440,500 1440,500 Z"
        stroke="none" stroke-width="0" fill="#ffffff" class="transition-all duration-300 ease-in-out delay-150"></path>
    </svg>
    </div>
    <img src="/assets/img/portada/manchaonda.png" alt="" class="position-absolute d-none d-sm-block" style="
      z-index: 2;
      bottom: 130px;
      right: 10px;
      bottom: 233px;
      -ms-transform: rotate(20deg);
      transform: rotate(6deg);
    " />

    <i class="fa-solid fa-chevrons-down fa-2x" class="position-absolute" style="z-index: 3; top: 0px; right: 0px"></i>
</section>

<main id="main">
    <section id="about" class="about py-0 position-absolute" style="
      z-index: 3;
      bottom: -550px;
      left: 280px;
      height: 70%;
      margin-bottom: 70px;
    ">
        <div class="row">
            <div class="col-lg-6 position-relative d-none d-sm-block">
                <img class="imgsomos" src="/assets/img/portada/foto_1.jpg" alt="" style="z-index: 4; position: absolute; bottom: 55px; left: 40%" data-aos="zoom-in" data-aos-delay="100" />
                <img class="imgsomos" src="/assets/img/portada/foto_2.png" alt="" style="z-index: 4; position: absolute; top: 50px; left: 45%" data-aos="zoom-in" data-aos-delay="200" />
                <img class="imgsomos" src="/assets/img/portada/foto_3.png" alt="" style="z-index: 4; position: absolute; top: -50px; left: 65%" data-aos="fade-up-right" data-aos-delay="300" />
                <img class="imgsomos" src="/assets/img/portada/foto_4.png" alt="" style="z-index: 4; position: absolute; bottom: 0px; left: 30%" data-aos="fade-down-left" data-aos-delay="300" />
                <img class="imgsomos" src="/assets/img/portada/foto_5.png" alt="" style="z-index: 4; position: absolute; bottom: 50px; left: 10%" data-aos="fade-left" data-aos-delay="300" />
            </div>
            <div class="col-lg-6 pt-5 content" data-aos="fade-in">
                <div class="roboto-thin mt-5 mb-0 p-0" style="color: #828282; font-size: 21px; line-height: 25px">
                    PASIÓN POR LA COMIDA
                </div>
                <div class="mt-0 p-0" style="
            font-size: 75px;
            font-weight: 200;
            line-height: 65px;
            color: #9cd3cd;
          ">
                    medialuna
                </div>
                <p class="roboto-light mt-4 mb-3" style="font-size: 18px; color: #333333; text-align: justify">
                    En La cocina de Medialuna creemos que es posible hacerte disfrutar de una experiencia saludable y diferente en el día a día. Por eso ofrecemos una alimentación rica y sana orientada a las personas que tienen que comer fuera de casa.
                </p>
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <a href="/nosotros" class="btn bml mb-3 py-2" style="" type="button">conocenos</a>
                </div>
            </div>
        </div>
    </section>

    <section id="nuestrosproductos" class="pt-1 mb-5" style="margin-top: 300px">
        <div class="cta mb-3">
            <div class="container" data-aos="zoom-in">
                <div class="text-center">
                    <h3 class="roboto" style="
              color: #fff;
              font-size: 75px;
              font-weight: 200;
              line-height: 88px;
            ">
                        ¡como un restaurante a domicilio!
                    </h3>
                    <p class="roboto" style="
              color: #4f4f4f;
              font-size: 16px;
              font-weight: 700;
              line-height: 24px;
            ">
                        Encuentra platos del día, postres o bebidas entre nuestra gran variedad de productos. Lo difícil será elegir...
                    </p>
                </div>
            </div>
        </div>

        <div class="container">
            <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="#">Menú completo</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" href="#">Menú infantil</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link tab-cate" href="#">Platos Principales</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" href="#">Postres</a>
                    </li>
                    <li class="nav-item item-cate">
                        <a class="nav-link tab-cate" style="" href="#">Packs</a>
                    </li>
                </ul>
            </div>
            <div class="line-cate mb-4"></div>
            <div class="row 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">
                <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="/web-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 id="contact" class="contact pt-1" style="margin-bottom: -250px">
        <div class="container">
            <div class="row">
                <div class="col-md-7 col-lg-7 p-0">
                    <iframe class="mb-4 mb-lg-0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3519.5093437663604!2d-15.456290149150247!3d28.10050571462516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xc40944d343e5711%3A0xa330b85a403c9199!2sLa%20Cocina%20de%20MediaLuna!5e0!3m2!1ses!2ses!4v1626798000993!5m2!1ses!2ses"
                        frameborder="0" style="border: 0; width: 100%; height: 350px" allowfullscreen=""></iframe>
                </div>
                <div class="col-md-5 col-lg-5 p-0">
                    <div class="p-5 pt-2 text-center" style="height: 350px; background-color: #1e1e1e">
                        <h3 style="font-weight: 300">¿hablamos?</h3>
                        <p>Teléfono local y pedidos
                            <br><span style="font-size: small;">(Horario de lunes a viernes de 8.00 a 16.00)</span>
                        </p>
                        <p><a href="tel:828048232" class="enlace2">828 04 82 32</a> - <a href="tel:615054511" class="enlace2">615
                054511</a></p>

                        <p><a href="tel:645742697" class="enlace2">Teléfono administración:<br>645 742 697</a></p>

                        <p class="text-center">
                            <a href="mailto:info@medialunacatering.es" class="enlace2">info@medialunacatering.es</a>
                            <br>
                            <a href="mailto:pedidoslacocinademedialuna@gmail.com" class="enlace2">pedidoslacocinademedialuna@gmail.com</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!---- >
    <section id="gallery" class="gallery" style="padding-top: 270px">
        <div class="container" data-aos="fade-up">
            <div class="section-title mb-1 pb-1">
                <p class="text-white" style="font-size: 18px">
                    Sigue nuestro día a día en Instagram
                </p>
                <hr style="border-bottom: 1px solid white" />
            </div>
            <div class="gallery-slider swiper-container">
                <div class="row">
                    <div class="col-md-2 mt-2">
                        <img src="/assets/img/gallery/instagram_1.png" class="img-fluid" alt="" />
                    </div>
                    <div class="col-md-2 mt-2">
                        <img src="/assets/img/gallery/instagram_2.png" class="img-fluid" alt="" />
                    </div>
                    <div class="col-md-2 mt-2">
                        <img src="/assets/img/gallery/instagram_3.png" class="img-fluid" alt="" />
                    </div>
                    <div class="col-md-2 mt-2">
                        <img src="/assets/img/gallery/instagram_4.png" class="img-fluid" alt="" />
                    </div>
                    <div class="col-md-2 mt-2">
                        <img src="/assets/img/gallery/instagram_5.png" class="img-fluid" alt="" />
                    </div>
                    <div class="col-md-2 mt-2">
                        <img src="/assets/img/gallery/instagram_6.png" class="img-fluid" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!---->
</main>
<script>
    resizeml();

    function resizeml() {
        var winwidth = $(window).width();
        if (winwidth <= 992) {
            $("#about").css("left", "0px");
        } else {
            $("#about").css("left", "280px");
        }
    }

    $(window).resize(function() {
        resizeml();
    });
</script>
{FOOTER}