/* =====================================================
   BEGO
   COMO FUNCIONA
===================================================== */


/* =====================================================
   SECCIÓN
===================================================== */

.bego-how {

    position: relative;

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

    margin: 0 auto;

    padding: 130px 0;

}


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

.bego-how__header {

    max-width: 760px;

    margin: 0 auto 100px;

    text-align: center;
}


.bego-how__eyebrow {

    display: inline-block;

    margin-bottom: 22px;

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

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.18em;
}


.bego-how__header h2 {

    margin: 0;

    color: var(--bego-black);

    font-size:
        clamp(
            48px,
            6vw,
            82px
        );

    line-height: 0.95;

    letter-spacing: -0.055em;

    font-weight: 650;
}


.bego-how__header h2 span {

    display: block;

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


.bego-how__header p {

    max-width: 580px;

    margin: 28px auto 0;

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

    font-size: 17px;

    line-height: 1.65;
}


/* =====================================================
   CONTENEDOR DE LOS 4 PASOS
   2 COLUMNAS EN ESCRITORIO
===================================================== */

.bego-how__steps {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 24px;

    width: 100%;
}


/* =====================================================
   PASO
===================================================== */

.bego-how__step {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 620px;

    margin: 0;

    padding: 42px;

    overflow: hidden;

    border-radius: 30px;

    background: #f5f5f5;

    direction: ltr;
}


/* =====================================================
   CONTENIDO DEL PASO
===================================================== */

.bego-how__content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    width: 100%;
}


/* =====================================================
   NÚMERO
===================================================== */

.bego-how__number {

    flex-shrink: 0;

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--bego-black);

    color: var(--bego-white);

    font-size: 17px;

    font-weight: 700;

    letter-spacing: -0.03em;
}


/* =====================================================
   TEXTO
===================================================== */

.bego-how__text {

    min-width: 0;

    max-width: 400px;
}


.bego-how__label {

    display: block;

    margin-bottom: 12px;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.bego-how__text h3 {

    margin: 0;

    color: var(--bego-black);

    font-size:
        clamp(
            30px,
            3vw,
            44px
        );

    line-height: 0.98;

    letter-spacing: -0.045em;

    font-weight: 650;
}


.bego-how__text p {

    max-width: 390px;

    margin: 20px 0 0;

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

    font-size: 15px;

    line-height: 1.6;
}


/* =====================================================
   CONTENEDOR DE IMAGEN
===================================================== */

.bego-how__image-wrapper {

    position: relative;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 320px;

    margin-top: 30px;

    padding: 20px;

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;
}


/* =====================================================
   IMAGEN DE LA APP
===================================================== */

.bego-how__image {

    position: relative;

    z-index: 2;

    display: block;

    width: auto;

    max-width: 100%;

    max-height: 390px;

    height: auto;

    object-fit: contain;

    border-radius: 16px;

    transition:
        transform
        var(--transition);
}


.bego-how__image:hover {

    transform: scale(1.025);
}


/* =====================================================
   DECORACIÓN SUTIL DE LA IMAGEN
===================================================== */

.bego-how__image-wrapper::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -130px;

    top: -130px;

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

    border-radius: 50%;

    pointer-events: none;
}


.bego-how__image-wrapper::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    left: -160px;

    bottom: -180px;

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

    border-radius: 50%;

    pointer-events: none;
}


/* =====================================================
   ESPACIO FUTURO
===================================================== */

.bego-content-placeholder {

    min-height: 400px;

    padding: 100px 5%;
}

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

@media (max-width: 1000px) {

    .bego-how {

        width:
            calc(100% - 48px);

        padding:
            100px 0;
    }


    /* =================================================
       GRID 2 × 2
    ================================================= */

    .bego-how__steps {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            20px;
    }


    /* =================================================
       CARD
    ================================================= */

    .bego-how__step {

        min-height:
            620px;

        padding:
            35px 28px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;

        border-radius:
            26px;
    }


    /* =================================================
       CONTENIDO
    ================================================= */

    .bego-how__content {

        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            flex-start;

        gap:
            18px;

        text-align:
            center;
    }


    /* =================================================
       NÚMERO
    ================================================= */

    .bego-how__number {

        width:
            54px;

        height:
            54px;

        flex-shrink:
            0;

        display:
            grid;

        place-items:
            center;

        font-size:
            16px;
    }


    /* =================================================
       TEXTO
    ================================================= */

    .bego-how__text {

        width:
            100%;

        max-width:
            430px;

        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;
    }


    .bego-how__label {

        display:
            block;

        text-align:
            center;
    }


    .bego-how__text h3 {

        width:
            100%;

        margin:
            0;

        font-size:
            38px;

        line-height:
            0.95;

        text-align:
            center;
    }


    .bego-how__text p {

        width:
            100%;

        max-width:
            360px;

        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            14px;

        line-height:
            1.6;

        text-align:
            center;
    }


    /* =================================================
       LÍNEA DECORATIVA
       CENTRADA
    ================================================= */

    .bego-how__text p::before {

        margin-left:
            auto;

        margin-right:
            auto;
    }


    /* =================================================
       IMAGEN
    ================================================= */

    .bego-how__image-wrapper {

        width:
            100%;

        min-height:
            300px;

        margin-top:
            25px;

        padding:
            15px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            22px;
    }


    .bego-how__image {

        width:
            auto;

        max-width:
            100%;

        max-height:
            360px;

        margin:
            0 auto;
    }

}


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

@media (max-width: 700px) {

    .bego-how {

        width:
            calc(100% - 32px);

        padding:
            80px 0;
    }


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

    .bego-how__header {

        margin-bottom:
            55px;

        text-align:
            center;
    }


    .bego-how__header h2 {

        font-size:
            48px;

        text-align:
            center;
    }


    .bego-how__header p {

        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            15px;

        text-align:
            center;
    }


    /* =================================================
       GRID 2 × 2
    ================================================= */

    .bego-how__steps {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            16px;
    }


    /* =================================================
       CARD
    ================================================= */

    .bego-how__step {

        min-height:
            570px;

        padding:
            30px 18px;

        border-radius:
            22px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;
    }


    /* =================================================
       CONTENIDO
    ================================================= */

    .bego-how__content {

        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        gap:
            14px;

        text-align:
            center;
    }


    /* =================================================
       NÚMERO
    ================================================= */

    .bego-how__number {

        width:
            48px;

        height:
            48px;

        flex-shrink:
            0;

        display:
            grid;

        place-items:
            center;

        font-size:
            14px;
    }


    /* =================================================
       TEXTO
    ================================================= */

    .bego-how__text {

        width:
            100%;

        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;
    }


    .bego-how__label {

        margin-bottom:
            14px;

        font-size:
            9px;

        text-align:
            center;
    }


    .bego-how__text h3 {

        width:
            100%;

        font-size:
            27px;

        line-height:
            0.95;

        letter-spacing:
            -0.045em;

        text-align:
            center;
    }


    .bego-how__text p {

        width:
            100%;

        max-width:
            230px;

        margin:
            18px auto 0;

        font-size:
            12px;

        line-height:
            1.55;

        text-align:
            center;
    }


    /* =================================================
       LÍNEA CENTRADA
    ================================================= */

    .bego-how__text p::before {

        margin:
            0 auto 18px;
    }


    /* =================================================
       IMAGEN
    ================================================= */

    .bego-how__image-wrapper {

        width:
            100%;

        min-height:
            240px;

        margin-top:
            22px;

        padding:
            10px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            18px;
    }


    .bego-how__image {

        width:
            auto;

        max-width:
            100%;

        max-height:
            330px;

        margin:
            0 auto;

        border-radius:
            12px;
    }

}


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

@media (max-width: 480px) {

    .bego-how {

        width:
            calc(100% - 24px);

        padding:
            65px 0;
    }


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

    .bego-how__header {

        margin-bottom:
            45px;

        text-align:
            center;
    }


    .bego-how__header h2 {

        font-size:
            40px;

        text-align:
            center;
    }


    .bego-how__header p {

        font-size:
            14px;

        text-align:
            center;
    }


    /* =================================================
       GRID
       SIEMPRE 2 × 2
    ================================================= */

    .bego-how__steps {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            12px;
    }


    /* =================================================
       CARD
    ================================================= */

    .bego-how__step {

        min-height:
            510px;

        padding:
            24px 12px;

        border-radius:
            18px;
    }


    /* =================================================
       NÚMERO
    ================================================= */

    .bego-how__number {

        width:
            42px;

        height:
            42px;

        font-size:
            13px;
    }


    /* =================================================
       TEXTO
    ================================================= */

    .bego-how__content {

        gap:
            12px;
    }


    .bego-how__label {

        margin-bottom:
            10px;

        font-size:
            8px;

        letter-spacing:
            0.13em;

        text-align:
            center;
    }


    .bego-how__text h3 {

        font-size:
            23px;

        line-height:
            0.95;

        text-align:
            center;
    }


    .bego-how__text p {

        max-width:
            180px;

        margin:
            16px auto 0;

        font-size:
            11px;

        line-height:
            1.5;

        text-align:
            center;
    }


    /* =================================================
       LÍNEA
    ================================================= */

    .bego-how__text p::before {

        width:
            42px;

        height:
            2px;

        margin:
            0 auto 14px;
    }


    /* =================================================
       IMAGEN
    ================================================= */

    .bego-how__image-wrapper {

        min-height:
            210px;

        margin-top:
            18px;

        padding:
            8px;

        border-radius:
            16px;
    }


    .bego-how__image {

        max-height:
            290px;

        border-radius:
            10px;
    }

}