```html
<style>
/* ===== LOADING ===== */

#tp-loading {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
    font-family: Arial, sans-serif;
}

#tp-loading.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.tp-box {
    text-align: center;
}

.tp-car {
    font-size: 60px;
    animation: tp-car-move 1.2s ease-in-out infinite;
}

.tp-title {
    margin-top: 12px;
    font-size: 27px;
    font-weight: bold;
    color: #111;
}

.tp-title span {
    color: #e5b900;
}

.tp-text {
    margin-top: 8px;
    color: #777;
    font-size: 14px;
}

.tp-spinner {
    width: 42px;
    height: 42px;
    margin: 25px auto 0;
    border: 4px solid #eeeeee;
    border-top-color: #e5b900;
    border-radius: 50%;
    animation: tp-spin .8s linear infinite;
}

.tp-loading-text {
    margin-top: 14px;
    font-size: 13px;
    color: #666;
}

@keyframes tp-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tp-car-move {
    0%,100% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }
}


/* ===== RESERVAS ===== */

#tp-booking {
    width: 100%;
    min-height: 100vh;
}

#tp-booking iframe {
    display: block;
    width: 100%;
    min-height: 100vh;
    border: 0;
}


/* ===== CELULAR ===== */

@media (max-width: 600px) {

    .tp-car {
        font-size: 52px;
    }

    .tp-title {
        font-size: 23px;
    }

}
</style>


<!-- ===== PANTALLA DE CARGA ===== -->

<div id="tp-loading">

    <div class="tp-box">

        <div class="tp-car">🚕</div>

        <div class="tp-title">
            Taxi <span>Puerto Iguazú</span>
        </div>

        <div class="tp-text">
            Preparando tu reserva...
        </div>

        <div class="tp-spinner"></div>

        <div class="tp-loading-text">
            Cargando sistema de reservas
        </div>

    </div>

</div>


<!-- ===== SISTEMA DE RESERVAS ===== -->

<div id="tp-booking">

    <iframe
        id="tp-iframe"
        src="https://app.farebookings.com/step1ssl.php?k=deeef572a620e24560ac58e6b40ab11c&s=f&d=pp&lng=gb"
        scrolling="auto">
    </iframe>

</div>


<script>

(function() {

    var iframe =
        document.getElementById("tp-iframe");

    var loading =
        document.getElementById("tp-loading");


    /* Tomar pickup de la URL */

    try {

        var pageURL =
            new URL(window.location.href);

        var pickup =
            pageURL.searchParams.get("pickup");


        if (pickup) {

            iframe.src =
                "https://app.farebookings.com/step1ssl.php?k=deeef572a620e24560ac58e6b40ab11c&s=f&d=pp&lng=gb&pickup="
                + encodeURIComponent(pickup);

        }

    } catch(e) {

        console.log(e);

    }


    /* Ocultar loading cuando carga el sistema */

    iframe.addEventListener("load", function() {

        setTimeout(function() {

            loading.classList.add("hide");

        }, 600);

    });


})();

</script>
```