/* =====================================================
   BEGO
   VOYAGE
===================================================== */


/* =====================================================
   SECTION
===================================================== */

.bego-trip {

    position: relative;

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin:
        120px auto
        0;

    padding: 0;

    background:
        var(--bego-white);
}


/* =====================================================
   HEADER
===================================================== */

.bego-trip__header {

    width: 100%;

    margin-bottom: 45px;
}


.bego-trip__header h2 {

    margin:
        0
        0
        25px;

    color:
        var(--bego-black);

    font-size:
        clamp(
            60px,
            8vw,
            110px
        );

    line-height:
        0.88;

    letter-spacing:
        -0.065em;

    font-weight:
        650;
}


.bego-trip__header h2 span {

    display: block;

    color:
        var(--bego-black-60);

    font-size:
        80px;
}


.bego-trip__header .bego-trip__eyebrow {

    display: block;

    margin-bottom: 12px;

    color:
        rgba(
            0,
            0,
            0,
            0.55
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.17em;
}


/* =====================================================
   BOX PRINCIPAL
   50% FORMULARIO / 50% IMAGEN
===================================================== */

.bego-trip__box {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    width: 100%;

    min-height: 520px;

    overflow: hidden;

    border-radius:
        28px;

    background:
        var(--bego-black);
}


/* =====================================================
   FORMULAIRE
   50%
===================================================== */

.bego-trip__form {

    position: relative;

    z-index: 2;

    width: 100%;

    min-width: 0;

    padding:
        50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        var(--bego-black);

    color:
        var(--bego-white);
}


/* =====================================================
   FIELD
===================================================== */

.bego-trip__field {

    position: relative;

    width: 100%;
}


.bego-trip__field label {

    display: block;

    margin-bottom: 12px;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.17em;
}


/* =====================================================
   INPUT
===================================================== */

.bego-trip__input {

    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

    min-height: 60px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

    border-radius:
        16px;

    background:
        var(--bego-white);

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}


.bego-trip__input:hover {

    border-color:
        rgba(
            0,
            0,
            0,
            0.22
        );
}


.bego-trip__input:focus-within {

    border-color:
        var(--bego-black);

    box-shadow:
        0 0 0 3px
        rgba(
            255,
            255,
            255,
            0.08
        );
}


.bego-trip__input input {

    width: 100%;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    color:
        var(--bego-black);

    font-family:
        inherit;

    font-size:
        15px;
}


.bego-trip__input input::placeholder {

    color:
        var(--bego-black-60);

    opacity:
        0.75;
}


/* =====================================================
   POINTS
===================================================== */

.bego-trip__dot {

    flex-shrink: 0;

    width:
        11px;

    height:
        11px;

    border:
        2px solid
        var(--bego-black);

    border-radius:
        50%;

    background:
        var(--bego-black);
}


.bego-trip__dot--destination {

    border-radius:
        3px;

    background:
        var(--bego-black);
}


/* =====================================================
   LIGNE
===================================================== */

.bego-trip__route-line {

    width:
        1px;

    height:
        28px;

    margin:
        0
        0
        0
        23px;

    background:
        rgba(
            255,
            255,
            255,
            0.35
        );
}


/* =====================================================
   BUTTON
===================================================== */

.bego-trip__button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        20px;

    width:
        100%;

    margin-top:
        28px;

    padding:
        8px
        8px
        8px
        24px;

    border-radius:
        999px;

    background:
        var(--bego-white);

    color:
        var(--bego-black);

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform var(--transition),
        opacity var(--transition);
}


.bego-trip__button:hover {

    transform:
        translateY(-3px);

    opacity:
        0.92;
}


/* =====================================================
   BUTTON ARROW
===================================================== */

.bego-trip__button-arrow {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--bego-black);

    color:
        var(--bego-white);

    font-size:
        19px;
}


/* =====================================================
   VISUAL
   50%
===================================================== */

.bego-trip__visual {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    min-height:
        520px;

    overflow:
        hidden;

    background:
        var(--bego-white);
}


/* =====================================================
   IMAGE
===================================================== */

.bego-trip__image {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform var(--transition);
}


.bego-trip__visual:hover
.bego-trip__image {

    transform:
        scale(1.02);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .bego-trip {

        width:
            calc(100% - 48px);

        margin-top:
            120px;
    }


    .bego-trip__header {

        margin-bottom:
            40px;
    }


    .bego-trip__form {

        padding:
            35px;
    }


    .bego-trip__box {

        min-height:
            480px;
    }


    .bego-trip__visual {

        min-height:
            480px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .bego-trip {

        width:
            calc(100% - 32px);

        margin-top:
            120px;
    }


    .bego-trip__header {

        margin-bottom:
            30px;
    }


    .bego-trip__header h2 {

        font-size:
            56px;
    }


    .bego-trip__header h2 span {

        font-size:
            56px;
    }


    /* =============================================
       UNA COLUMNA
    ============================================= */

    .bego-trip__box {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        border-radius:
            24px;
    }


    .bego-trip__form {

        padding:
            30px
            24px;

        min-height:
            auto;
    }


    .bego-trip__visual {

        min-height:
            300px;

        height:
            300px;
    }


    .bego-trip__input {

        min-height:
            56px;
    }


    .bego-trip__button {

        margin-top:
            24px;
    }

}


/* =====================================================
   MOBILE PEQUEÑO
===================================================== */

@media (max-width: 480px) {

    .bego-trip {

        width:
            calc(100% - 24px);

        margin-top:
            120px;
    }


    .bego-trip__header h2 {

        font-size:
            44px;
    }


    .bego-trip__header h2 span {

        font-size:
            44px;
    }


    .bego-trip__box {

        border-radius:
            20px;
    }


    .bego-trip__form {

        padding:
            24px
            20px;
    }


    .bego-trip__field label {

        font-size:
            9px;
    }


    .bego-trip__input {

        min-height:
            52px;

        padding:
            0
            15px;
    }


    .bego-trip__input input {

        font-size:
            14px;
    }


    .bego-trip__button {

        margin-top:
            22px;

        padding-left:
            20px;
    }


    .bego-trip__button-arrow {

        width:
            42px;

        height:
            42px;
    }


    .bego-trip__visual {

        height:
            250px;

        min-height:
            250px;
    }

}