/*
 * Bloque de eleccion de cuenta (Cuenta Personal / Cuenta Empresarial).
 * Se carga en el sitio junto a core.css y tambien en /embed/eleccion-de-cuenta,
 * asi el banner embebido y el del sitio comparten los mismos estilos.
 */

/* Account choice */
.account-choice {
    position: relative;
    overflow: hidden;
    background-color: #0c1522;
    color: #ffffff;
    isolation: isolate;
    padding: 130px 0 104px;
}

    .account-choice__pattern {
        position: absolute;
        z-index: 0;
        bottom: 84px;
        left: calc(8.333% + 113px);
        width: 900px;
        height: 810px;
        pointer-events: none;
    }

        .account-choice__pattern img {
            position: absolute;
            top: -416px;
            left: -500px;
            display: block;
            width: 1900px;
            max-width: none;
            height: 1725.87px;
        }

    .account-choice__inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 400px) 1px minmax(0, 400px);
        justify-content: space-between;
        width: min(1080px, calc(100% - 64px));
        max-width: 1080px;
    }

    .account-choice__column {
        min-width: 0;
    }

    .account-choice__title {
        margin: 0;
        color: #ffffff;
        font-family: Rubik, sans-serif;
        font-size: clamp(38px, 3.48vw, 50px);
        font-weight: 700;
        letter-spacing: -1px;
        line-height: 1.1;
    }

    .account-choice__column--company .account-choice__title {
        white-space: nowrap;
    }

    .account-choice__description {
        max-width: 400px;
        margin: 31px auto 0;
        color: #ffffff;
        font-family: Rubik, sans-serif;
        font-size: clamp(21px, 1.88vw, 27px);
        font-weight: 400;
        line-height: 1.22;
        text-align: center;
    }

    .account-choice__divider {
        align-self: start;
        width: 1px;
        min-height: 492px;
        background-color: rgba(255, 255, 255, 0.7);
    }

    .account-choice__column--personal .account-choice__description {
        margin-left: auto;
    }

    .account-choice__qr {
        display: block;
        width: 160px;
        height: 160px;
        margin: 80px auto 47px;
        border-radius: 8px;
        object-fit: cover;
    }

    .account-choice__qr-link {
        display: block;
        width: 160px;
        margin: 80px auto 47px;
        border-radius: 8px;
    }

        .account-choice__qr-link .account-choice__qr {
            margin: 0;
        }

        .account-choice__qr-link:focus-visible {
            outline: 3px solid #ffffff;
            outline-offset: 4px;
        }

    .account-choice__stores {
        display: grid;
        justify-items: center;
        gap: 24px;
        font-family: Rubik, sans-serif;
        font-size: 16px;
        line-height: 27px;
    }

    .account-choice__store-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

        .account-choice__store-links a {
            display: inline-flex;
        }

        .account-choice__store-badge {
            display: inline-flex;
            align-items: center;
            width: 120px;
            height: 40px;
            padding: 4px 7px;
            border: 1px solid #000000;
            border-radius: 6px;
            background-color: #ffffff;
            color: #000000;
            text-decoration: none;
        }

        .account-choice__store-icon {
            display: block;
            flex: 0 0 auto;
            width: auto;
            height: 24px;
            margin-right: 8px;
        }

        .account-choice__store-copy {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: 0;
            color: #000000;
            line-height: 1;
            white-space: nowrap;
        }

            .account-choice__store-copy > span {
                font-family: Rubik, sans-serif;
                font-size: 8px;
                font-weight: 500;
                line-height: 9px;
            }

            .account-choice__store-copy strong {
                font-family: Rubik, sans-serif;
                font-size: 17px;
                font-weight: 500;
                letter-spacing: -0.45px;
                line-height: 16px;
            }

            .account-choice__store-copy--google > span {
                font-size: 8px;
                font-weight: 400;
            }

            .account-choice__store-copy--google strong {
                font-size: 15px;
                letter-spacing: -0.3px;
                line-height: 15px;
            }

    .account-choice__column--company {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .account-choice__column--company .account-choice__description {
        margin-left: auto;
    }

    .account-choice__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 280px;
        min-height: 56px;
        margin: 136px auto 0;
        padding: 16px 28px 17px;
        border-radius: 40px;
        background-color: #ffffff;
        color: #26242b;
        font-family: Rubik, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
    }

        .account-choice__cta:hover {
            background-color: #2e58eb;
            color: #ffffff;
        }

@media screen and (max-width: 1024px) {
    .account-choice {
        padding: 96px 0;
    }

        .account-choice__pattern {
            bottom: 50%;
            left: 50%;
            transform: translate(-50%, 50%);
        }

        .account-choice__inner {
            grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
            column-gap: 52px;
            width: calc(100% - 64px);
        }

        .account-choice__divider {
            min-height: 450px;
        }

        .account-choice__cta {
            margin-top: 110px;
        }
}

@media screen and (max-width: 767px) {
    .account-choice {
        padding: 72px 0;
    }

        .account-choice__pattern {
            top: 50%;
            bottom: auto;
            left: 50%;
            width: 900px;
            height: 810px;
            opacity: 1;
            transform: translate(-50%, -50%);
        }

        .account-choice__inner {
            grid-template-columns: 1fr;
            row-gap: 56px;
            padding-right: 24px;
            padding-left: 24px;
        }

        .account-choice__column {
            align-items: center;
            text-align: center;
        }

        .account-choice__title {
            font-size: clamp(34px, 10vw, 44px);
        }

        .account-choice__column--company .account-choice__title {
            white-space: normal;
        }

        .account-choice__description {
            margin: 20px auto 0;
            font-size: 21px;
        }

        .account-choice__divider {
            width: min(100%, 320px);
            min-height: 1px;
            height: 1px;
            margin: 0 auto;
        }

        /* En mobile el QR no es escaneable desde el mismo telefono: solo botones de tienda. */
        .account-choice__qr,
        .account-choice__qr-link,
        .account-choice__stores-label {
            display: none;
        }

        .account-choice__stores {
            margin-top: 36px;
        }

        .account-choice__cta {
            width: min(100%, 280px);
            margin-top: 54px;
        }
}