@extends('ushuaia.web.plantilla')

@section('contenido')
    <style>
        #como-la-obtengo {
            background-repeat: no-repeat;
            /* background: url('/ushuaia/images/fondo2-02.png') no-repeat;*/
            background: rgba(12, 0, 79, 1);
            background: -moz-linear-gradient(left, rgba(12, 0, 79, 1) 0%, rgba(12, 0, 79, 1) 3%, rgba(4, 4, 122, 1) 53%, rgba(27, 0, 179, 1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(12, 0, 79, 1)), color-stop(3%, rgba(12, 0, 79, 1)), color-stop(53%, rgba(4, 4, 122, 1)), color-stop(100%, rgba(27, 0, 179, 1)));
            background: -webkit-linear-gradient(left, rgba(12, 0, 79, 1) 0%, rgba(12, 0, 79, 1) 3%, rgba(4, 4, 122, 1) 53%, rgba(27, 0, 179, 1) 100%);
            background: -o-linear-gradient(left, rgba(12, 0, 79, 1) 0%, rgba(12, 0, 79, 1) 3%, rgba(4, 4, 122, 1) 53%, rgba(27, 0, 179, 1) 100%);
            background: -ms-linear-gradient(left, rgba(12, 0, 79, 1) 0%, rgba(12, 0, 79, 1) 3%, rgba(4, 4, 122, 1) 53%, rgba(27, 0, 179, 1) 100%);
            background: linear-gradient(to right, rgba(12, 0, 79, 1) 0%, rgba(12, 0, 79, 1) 3%, rgba(4, 4, 122, 1) 53%, rgba(27, 0, 179, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c004f', endColorstr='#1b00b3', GradientType=1);
            background-size: 100%;
            color: white;
        }

    </style>
    <div class="container-fluid" id="index-turismo">
        <div class="row mx-0 h-100">
            <div class="col-12 px-md-3 px-1 align-self-center">
                <div class="ml-lg-5 pl-lg-5">
                    <div class="row">
                        <div class="col-12">
                            <p id="text-turismo" class="mb-0 text-left d-none">Disfrutá con nuestra tarjeta<br
                                    class="d-lg-block d-none"><span class="d-lg-none d-inline-block">&nbsp;</span>de
                                descuentos,
                                <strong>increíbles<br class="d-lg-block d-none"><span
                                        class="d-lg-none d-inline-block">&nbsp;</span>beneficios para tu estadía</strong>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container my-sm-5 mb-md-5 mb-4 h-100" id="como-funciona">
        <div class="row d-none">
            <div class="col-12">
                <h2 class="mt-md-0 mt-4 mb-3 text-center">Ya tengo mi tarjeta ¿Cómo funciona?</h2>
                <div class="row funcion px-2">
                    <div class="columna col-lg-2 col-sm-4 div col-6 p-3 mr-lg-3 mx-auto">
                        <div class="funciones mb-2">
                            <div class="text-center p-4">
                                <img src="/ushuaia/images/celu.svg" alt="">
                            </div>
                            <div class="p-3 pasos">
                                <h3>1.</h3>
                                <p>Descargá la app en<br>tu teléfono móvil<br>para iOS y Android.</p>
                            </div>
                        </div>
                    </div>
                    <div class="columna col-lg-2 col-sm-4 col-6 p-3 mr-lg-3 mx-auto">
                        <div class="funciones mb-2">
                            <div class="text-center p-4">
                                <img src="/ushuaia/images/lista-09.svg" alt="">
                            </div>
                            <div class="p-3 pasos">
                                <h3>2.</h3>
                                <p>Completá tus datos<br>personales para<br>registrarte y validá<br>tu identidad.</p>
                            </div>
                        </div>

                    </div>
                    <div class="columna col-lg-2 col-sm-4 col-6 p-3 mr-lg-3 mx-auto">
                        <div class="funciones mb-2">
                            <div class="text-center p-4">
                                <img src="/ushuaia/images/check-02.svg" alt="">
                            </div>
                            <div class="p-3 pasos">
                                <h3>3.</h3>
                                <p><strong>Y listo</strong>, una vez que tengas tu<br>tarjeta virtual, te invitamos a
                                    que<br>explores los comercios adheridos,<br>te acerques al local y empieces<br>a
                                    disfrutar de tus descuentos</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="pasos-registro">
            <div class="col-12">
                <h2 class="mt-md-0 my-5 text-center">¿Cómo obtengo la tarjeta +U Turismo?</h2>
            </div>
            <div class="col-12">
                <div class="card-deck row justify-content-xl-center justify-content-center">
                    <div class="card rounded col-10 col-lg-7 col-xl-4 px-0 shadow" style="overflow: hidden">
                        <div class="row h-100">
                            <div class="col-4 align-self-center pr-0">
                                <img class="card-img-top align-self-center my-lg-3 w-100" src="/ushuaia/images/celu.svg"
                                    alt="Card image cap">
                            </div>
                            <div class="col-8 pl-0">
                                <div class="card-body h-100">
                                    <h3 class="card-title">1.</h3>
                                    <p class="card-text">Descargá la app en tu teléfono móvil para iOS y Android.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card rounded col-10 col-lg-7 col-xl-4 px-0 shadow mt-sm-3 mt-md-4 mt-xl-0"
                        style="overflow: hidden">
                        <div class="row h-100">
                            <div class="col-4 align-self-center pr-0">
                                <img class="card-img-top align-self-center my-lg-3 w-100" src="/ushuaia/images/lista-09.svg"
                                    alt="Card image cap">
                            </div>
                            <div class="col-8 pl-0">
                                <div class="card-body h-100">
                                    <h3 class="card-title">2.</h3>
                                    <p class="card-text">Completá tus datos personales para registrarte y validá tu
                                        identidad.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card rounded col-10 col-lg-7 col-xl-4 px-0 shadow mt-sm-3 mt-md-4 mt-xl-0"
                        style="overflow: hidden">
                        <div class="row h-100">
                            <div class="col-4 align-self-center pr-0">
                                <img class="card-img-top align-self-center my-lg-3 w-100" src="/ushuaia/images/check-02.svg"
                                    alt="Card image cap">
                            </div>
                            <div class="col-8 pl-0">
                                <div class="card-body h-100">
                                    <h3 class="card-title">3.</h3>
                                    <p class="card-text"><strong>Y listo</strong>, una vez que tengas tu tarjeta
                                        virtual, te
                                        invitamos a que explores los comercios adheridos, te acerques al local y empieces a
                                        disfrutar de tus descuentos</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="como-la-obtengo">
        <div class="container">
            <div class="row">
                <div class="col-12 pt-1 columna mt-lg-5 my-4">
                    <div class="row mx-0">
                        <div class="info p-4">
                            <div class="row">
                                <div class="col-sm-6 col-12">
                                    <h4 class="text-uppercase mb-4 text-center">¿Cómo se usa la tarjeta turismo?</h4>
                                    <video src="/ushuaia/files/video presentacion.mp4" controls
                                        class="w-100 img-thumbnail"></video>
                                </div>
                                <div class="col-sm-6 col-12">
                                    <h4 class="text-uppercase mb-4 mt-4 mt-sm-0 text-center">¿Qué es la tarjeta Turismo?</h4>
                                    <video src="/ushuaia/files/video presentacion1.mp4" controls
                                        class="w-100 img-thumbnail"></video>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 turista my-4">
                    <div class="row">
                        <div class="col-12">
                            <div class="info p-4 mb-4">
                                <div class="row">
                                    <div class="col-sm-6 col-12">
                                        <h3 class="text-uppercase mb-4">Tarjeta +U Turismo</h3>
                                        <p>Con esta tarjeta digital podrás acceder a descuentos y promociones de nuestros
                                            comercios adheridos en Ushuaia.</p>
                                        <p class="requisitos-text">Disfrute de los beneficios en su viaje al fin del mundo
                                            con Tarjeta +U.</p>
                                    </div>
                                    <div class="col-sm-6 col-12 align-self-center">
                                        <a href="/turismo"
                                            class="btnTurista text-uppercase d-block py-1 text-light mx-auto">Registrarse</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection