/* ============================================================
   AMOO PANEL
   WELCOME / DESKTOP
============================================================ */

:root {

    --welcome-text: #25263b;
    --welcome-muted: #747487;

    --welcome-gold: #c99049;
    --welcome-gold-soft: #e7bd7c;

    --welcome-coral: #ff777a;
    --welcome-peach: #ffaf78;
    --welcome-yellow: #ffc963;

    --welcome-green: #20b985;
    --welcome-green-soft: rgba(32, 185, 133, .08);

    --welcome-border: rgba(116, 92, 70, .17);

    --welcome-surface:
        rgba(255, 255, 255, .79);

    --welcome-shadow:
        0 28px 80px rgba(71, 61, 78, .16);

    --welcome-radius: 30px;
}


/* ============================================================
   RESET LOCAL
============================================================ */

* {
    box-sizing: border-box;
}
html {
    min-height: 100%;
    scrollbar-gutter: stable;
}

html,
body {
    margin: 0;
    min-height: 100%;
}


button,
input {
    font: inherit;
}


button {
    border: 0;
}


body {

    min-height: 100vh;

    color: var(--welcome-text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        url("./background-amoo-acount.jpg")
        center center / cover
        no-repeat fixed;

    overflow-x: hidden;
}


/* ============================================================
   VELO GENERAL
============================================================ */

.welcome-page::before {

    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 44%,
            rgba(255, 255, 255, .20),
            rgba(255, 255, 255, .04) 44%,
            transparent 68%
        ),

        linear-gradient(
            180deg,
            rgba(255, 255, 255, .04),
            rgba(255, 248, 239, .07)
        );

    z-index: 0;
}


/* ============================================================
   SHELL
============================================================ */

.welcome-shell {

    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        46px
        40px
        52px;

opacity: 0;

transition:
    opacity .9s ease;
}


body.is-ready .welcome-shell {
    opacity: 1;
}


/* ============================================================
   BRAND
============================================================ */

.welcome-brand {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    user-select: none;
}





.welcome-brand__name {

    display: flex;
    align-items: baseline;

    gap: 9px;

    letter-spacing: .035em;

    font-size: 2rem;
    font-weight: 300;
}


.welcome-brand__name strong {

    font-weight: 400;

    letter-spacing: .12em;

    color: #31304c;
}


.welcome-brand__name span {

    color: var(--welcome-gold);
}


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

.welcome-card {

    position: relative;

    width: min(650px, calc(100vw - 80px));

    min-height: 600px;

    padding:
        40px
        52px
        36px;

    border:
        1px solid
        rgba(255,255,255,.82);

    border-radius:
        var(--welcome-radius);

    background:
        var(--welcome-surface);

    box-shadow:
        var(--welcome-shadow);

    backdrop-filter:
        blur(20px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(120%);

    overflow: hidden;
    
    
    transition:
    background .65s ease,
    box-shadow .65s ease,
    border-color .65s ease;
}


.welcome-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            140deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,0) 38%
        );

    opacity: .75;
}


.welcome-view {

    position: relative;
    z-index: 1;
}


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

.welcome-card__header {

    text-align: center;

    margin-bottom: 26px;
}


.welcome-card__header h1 {

    margin:
        0
        0
        7px;

    color: #27283b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2.32rem;
    font-weight: 400;
    line-height: 1.12;

    letter-spacing: -.025em;
}


.welcome-card__header h1 span {

    color:
        var(--welcome-gold);
}


.welcome-establishment {

    color:
        var(--welcome-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.18rem;
}


.welcome-divider {

    position: relative;

    width: 300px;

    max-width: 70%;

    height: 18px;

    margin:
        10px auto
        8px;
}


.welcome-divider::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,144,73,.42),
            transparent
        );
}


.welcome-divider span {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    background:
        #d5a260;

    box-shadow:
        0 0 11px
        rgba(215,160,90,.6);
}


.welcome-card__intro {

    margin:
        0
        0
        10px;

    font-size: 1rem;

    color:
        #625f65;
}


.welcome-email {

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color:
        #777887;

    font-size: 1rem;
}


.welcome-email svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   FORM
============================================================ */

.welcome-form {

    display: flex;
    flex-direction: column;

    gap: 17px;
}


.welcome-field label {

    display: block;

    margin-bottom: 7px;

    color:
        #68616a;

    font-size: .91rem;
    font-weight: 500;
}


.welcome-input-wrap {

    position: relative;
}


.welcome-input-wrap input {

    width: 100%;
    height: 54px;

    padding:
        0
        94px
        0
        18px;

    border:
        1px solid
        var(--welcome-border);

    border-radius:
        13px;

    outline: none;

    background:
        rgba(255,255,255,.48);

    color:
        #30303e;

    font-size: 1rem;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45);

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


.welcome-input-wrap input:focus {

    border-color:
        rgba(214, 151, 84, .54);

    background:
        rgba(255,255,255,.72);

    box-shadow:
        0 0 0 4px
        rgba(245, 182, 113, .10);
}


/* ============================================================
   MOSTRAR PASSWORD
============================================================ */

.welcome-password-toggle {

    position: absolute;

    top: 50%;
    right: 14px;

    width: 34px;
    height: 34px;

    transform:
        translateY(-50%);

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background:
        transparent;

    color:
        #9b8d84;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.welcome-password-toggle:hover {

    background:
        rgba(204,145,79,.08);

    color:
        #bd7f42;
}


.welcome-password-toggle svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   OK CAMPO
============================================================ */

.welcome-field-ok {

    position: absolute;

    top: 50%;
    right: 53px;

    width: 24px;
    height: 24px;

    transform:
        translateY(-50%)
        scale(.6);

    display: grid;
    place-items: center;

    border:
        1.5px solid
        var(--welcome-green);

    border-radius: 50%;

    color:
        var(--welcome-green);

    font-size: .82rem;
    font-weight: 700;

    opacity: 0;

    transition:
        opacity .25s ease,
        transform .28s
        cubic-bezier(.2,.9,.3,1.4);
}


.welcome-field.is-valid
.welcome-field-ok {

    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


/* ============================================================
   PASSWORD RULES
============================================================ */

.password-rules {

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap:
        9px
        13px;

    padding:
        0
        4px;
}


.password-rule {

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color:
        #918c8d;

    font-size: .77rem;

    transition:
        color .22s ease;
}


.password-rule span {

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(130,130,130,.28);

    border-radius: 50%;

    color:
        transparent;

    font-size: .68rem;

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease;
}


.password-rule.is-valid {

    color:
        #3b8e74;
}


.password-rule.is-valid span {

    color:
        var(--welcome-green);

    border-color:
        var(--welcome-green);

    transform:
        scale(1.04);
}


/* ============================================================
   PASSWORD MATCH
============================================================ */

.password-match {

    min-height: 57px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        0
        16px;

    border:
        1px solid
        transparent;

    border-radius:
        13px;

    color:
        transparent;

    background:
        transparent;

    opacity: 0;

    transform:
        translateY(-4px);

    transition:
        opacity .28s ease,
        transform .28s ease,
        color .28s ease,
        background .28s ease,
        border-color .28s ease;
}


.password-match.is-valid {

    opacity: 1;

    transform:
        translateY(0);

    color:
        #3a705f;

    border-color:
        rgba(32,185,133,.23);

    background:
        var(--welcome-green-soft);
}


.password-match__icon {

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border:
        2px solid
        var(--welcome-green);

    border-radius: 50%;

    color:
        var(--welcome-green);

    font-size: .82rem;
    font-weight: 700;
}


/* ============================================================
   ERROR
============================================================ */

.welcome-error {

    display: none;

    padding:
        11px
        14px;

    border-radius:
        11px;

    background:
        rgba(191, 69, 69, .07);

    color:
        #a94444;

    font-size: .88rem;
}


.welcome-error.is-visible {
    display: block;
}


/* ============================================================
   CTA
============================================================ */

.welcome-submit {

    position: relative;

    width: 100%;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 2px;

    padding:
        0
        62px;

    border-radius:
        14px;

    background:

        linear-gradient(
            100deg,
            var(--welcome-coral),
            var(--welcome-peach) 54%,
            var(--welcome-yellow)
        );

    color:
        #fff;

    font-size: 1.15rem;
    font-weight: 600;

    letter-spacing: .005em;

    cursor: pointer;

    box-shadow:
        0 10px 30px
        rgba(242,143,108,.23);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease,
        opacity .2s ease;
}


.welcome-submit:not(:disabled):hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 35px
        rgba(242,143,108,.31);

    filter:
        saturate(1.05);
}


.welcome-submit:disabled {

    opacity: .42;

    cursor: default;

    box-shadow: none;

    filter:
        saturate(.45);
}


.welcome-submit__arrow {

    position: absolute;

    right: 23px;

    top: 50%;

    transform:
        translateY(-50%);

    font-size: 1.6rem;
    font-weight: 300;
}


.welcome-submit.is-loading {

    pointer-events: none;

    color:
        transparent;
}


.welcome-submit.is-loading::after {

    content: "";

    position: absolute;

    width: 23px;
    height: 23px;

    border:
        2px solid
        rgba(255,255,255,.38);

    border-top-color:
        #fff;

    border-radius: 50%;

    animation:
        welcome-spin .75s linear infinite;
}


@keyframes welcome-spin {

    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   DEVICE NOTE
============================================================ */

.welcome-device-note {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color:
        #93877e;

    font-size: .78rem;
}


.welcome-device-note svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   SUCCESS
============================================================ */

.welcome-view--success {

    min-height: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.welcome-view--success[hidden] {
    display: none;
}


.welcome-success__icon {

    position: relative;

    width: 96px;
    height: 96px;

    margin-bottom: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(32,185,133,.08);

    box-shadow:
        0 0 0 10px rgba(32,185,133,.035);
}


.welcome-success__icon span {

    width: 63px;
    height: 63px;

    display: grid;
    place-items: center;

    border:
        2px solid
        var(--welcome-green);

    border-radius: 50%;

    color:
        var(--welcome-green);

    font-size: 1.8rem;

    transform:
        scale(.4);

    opacity: 0;
}


.welcome-view--success.is-visible
.welcome-success__icon span {

    animation:
        welcome-success-check
        .58s
        cubic-bezier(.18,.9,.34,1.35)
        forwards;
}


@keyframes welcome-success-check {

    to {

        opacity: 1;

        transform:
            scale(1);
    }
}


.welcome-view--success h2 {

    margin:
        0
        0
        12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2.25rem;
    font-weight: 400;

    color:
        #292a3b;
}


.welcome-view--success p {

    margin:
        0
        0
        6px;

    color:
        var(--welcome-muted);
}


.welcome-view--success > strong {

    color:
        var(--welcome-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.25rem;
    font-weight: 400;
}


.welcome-success__line {

    width: 220px;
    height: 1px;

    margin:
        25px
        auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,144,73,.44),
            transparent
        );
}


.welcome-success__device {

    max-width: 410px;

    line-height: 1.5;
}


.welcome-access {

    position: relative;

    width: 100%;
    max-width: 390px;

    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    margin-top: 29px;

    padding:
        0
        25px;

    border-radius:
        14px;

    color:
        #fff;

    background:

        linear-gradient(
            100deg,
            var(--welcome-coral),
            var(--welcome-peach) 55%,
            var(--welcome-yellow)
        );

    text-decoration: none;

    font-size: 1.08rem;
    font-weight: 600;

    box-shadow:
        0 12px 30px
        rgba(242,143,108,.23);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.welcome-access:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 36px
        rgba(242,143,108,.31);
}


/* ============================================================
   INTRO
============================================================ */

.welcome-intro {

    position: fixed;
    z-index: 100;

    inset: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,250,245,.15),
            rgba(255,248,239,.06)
        );
}


.welcome-intro::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 50% 47%,
            rgba(255,255,255,.76) 0,
            rgba(255,250,243,.38) 23%,
            rgba(255,255,255,.04) 59%,
            transparent 72%
        );
}


.welcome-intro__glow {

    position: absolute;

    width: 660px;
    height: 660px;

    border-radius: 50%;

    border:
        1px solid
        rgba(224, 170, 105, .68);

    box-shadow:
        0 0 42px rgba(255, 194, 124, .28),
        0 0 110px rgba(255, 208, 157, .22),
        inset 0 0 45px rgba(255,255,255,.22);

    animation:
        welcome-orbit
        3s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


.welcome-intro__glow::before,
.welcome-intro__glow::after {

    content: "";

    position: absolute;

    border-radius: 50%;
}


.welcome-intro__glow::before {

    inset: 45px;

    border:
        1px solid
        rgba(133, 177, 216, .46);

    box-shadow:
        0 0 32px
        rgba(137, 190, 224, .12);
}


.welcome-intro__glow::after {

    inset: 110px;

    border:
        1px solid
        rgba(224, 151, 156, .38);

    box-shadow:
        0 0 30px
        rgba(229, 157, 163, .10);
}


@keyframes welcome-orbit {

    0% {

        opacity: 0;

        transform:
            scale(.72)
            rotate(-12deg);
    }

    30% {
        opacity: .95;
    }

    75% {
        opacity: .88;
    }

    100% {

        opacity: .70;

        transform:
            scale(1.06)
            rotate(8deg);
    }
}


.welcome-intro__content {

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    color:
        #343348;

    transform:
        translateY(7px);

    animation:
        welcome-intro-content
        2.6s ease forwards;
}


@keyframes welcome-intro-content {

    0% {

        opacity: 0;

        transform:
            translateY(22px)
            scale(.96);
    }

    24% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    78% {
        opacity: 1;
    }

    100% {

        opacity: .9;

        transform:
            translateY(-4px)
            scale(1.01);
    }
}





.welcome-intro__brand {

    display: flex;
    align-items: baseline;

    gap: 12px;

    font-size: 2.75rem;

    font-weight: 300;

    letter-spacing: .03em;
}


.welcome-intro__brand strong {

    font-weight: 400;

    letter-spacing: .12em;
}


.welcome-intro__brand span {

    color:
        var(--welcome-gold);
}


.welcome-intro__line {

    width: 0;

    height: 1px;

    margin:
        19px
        0
        14px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #d8a260,
            transparent
        );

    animation:
        welcome-intro-line
        1.4s
        .55s
        ease
        forwards;
}


@keyframes welcome-intro-line {

    to {
        width: 240px;
    }
}


.welcome-intro__welcome {

    color:
        #686170;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.12rem;

    letter-spacing: .13em;

    opacity: 0;

    animation:
        welcome-intro-text
        .8s
        1s
        ease
        forwards;
}


@keyframes welcome-intro-text {

    to {
        opacity: 1;
    }
}


/* ============================================================
   SALIDA INTRO
============================================================ */

.welcome-intro.is-leaving {

    animation:
        welcome-intro-leave
        .8s
        cubic-bezier(.4,0,.2,1)
        forwards;

    pointer-events: none;
}


@keyframes welcome-intro-leave {

    to {
        opacity: 0;
        visibility: hidden;
    }
}
/* ============================================================
   AMOO SYMBOL
============================================================ */

.amoo-symbol {

    display: block;

    width: 100%;
    height: auto;

    overflow: visible;

    color:
        var(--welcome-gold);
}


/* ============================================================
   SÍMBOLO INTRO
============================================================ */

.welcome-intro__mark {

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;
}


.amoo-symbol--intro {

    width: 165px;
    height: auto;

    color:
        #b97843;

    filter:
        drop-shadow(
            0 0 8px
            rgba(219, 160, 91, .22)
        )
        drop-shadow(
            0 0 19px
            rgba(239, 194, 134, .12)
        );
}


/* ============================================================
   SÍMBOLO BRAND
============================================================ */

.welcome-brand__mark {

    width: 66px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}


.amoo-symbol--brand {

    width: 66px;
    height: auto;

    color:
        var(--welcome-gold);
}

.welcome-secret-input {
    -webkit-text-security: disc;
}
/* ============================================================
   WELCOME NOTICE
============================================================ */

.welcome-notice {

    width: 100%;
    max-width: 470px;

    min-height: 275px;

    margin:
        20px
        auto
        0;

    padding:
        30px
        34px
        34px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px solid
        rgba(201, 144, 73, .16);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.48),
            rgba(255,248,239,.30)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65);
}


.welcome-notice__icon {

    width: 52px;
    height: 52px;

    margin-bottom: 19px;

    display: grid;
    place-items: center;

    border:
        1.5px solid
        rgba(201, 144, 73, .62);

    border-radius: 50%;

    color:
        var(--welcome-gold);

    background:
        rgba(201, 144, 73, .06);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.45rem;
    font-weight: 400;

    box-shadow:
        0 0 0 7px
        rgba(201, 144, 73, .035);
}


.welcome-notice h2 {

    margin:
        0
        0
        13px;

    color:
        #292a3b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.55rem;
    font-weight: 400;

    line-height: 1.2;
}


.welcome-notice p {

    max-width: 390px;

    margin: 0;

    color:
        #6f6c77;

    font-size: .96rem;

    line-height: 1.55;
}
/* ============================================================
   TRANSICIÓN DE FONDO
============================================================ */

.welcome-page::after {

    content: "";

    position: fixed;
    z-index: 1;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,.52) 0,
            rgba(255,226,188,.20) 30%,
            rgba(255,255,255,.04) 62%,
            transparent 76%
        );

    transition:
        opacity .8s ease;
}


body.is-activating::after {
    opacity: .82;
}


body.is-login-ready::after {
    opacity: .38;
}
body.is-activating .welcome-card {

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 30px 90px
        rgba(78, 61, 71, .18);
}


body.is-login-ready .welcome-card {

    background:
        rgba(255,255,255,.82);

    box-shadow:
        0 28px 84px
        rgba(71, 61, 78, .17);
}

/* ============================================================
   ACTIVANDO CUENTA
============================================================ */

.welcome-view--activating {

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.welcome-view--activating[hidden] {
    display: none;
}


.activation-process {

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.activation-process__visual {

    margin-bottom: 30px;
}


.activation-process__orbit {

    position: relative;

    width: 104px;
    height: 104px;

    display: grid;
    place-items: center;
}


.activation-process__orbit::before {

    content: "";

    position: absolute;

    inset: 0;

    border:
        1.5px solid
        rgba(201, 144, 73, .18);

    border-top-color:
        rgba(201, 144, 73, .88);

    border-right-color:
        rgba(231, 189, 124, .55);

    border-radius: 50%;

    box-shadow:
        0 0 28px
        rgba(224, 170, 105, .16);

    animation:
        welcome-activation-spin
        1.05s
        linear
        infinite;

    transition:
        opacity .35s ease;
}


.activation-process__orbit::after {

    content: "";

    position: absolute;

    inset: 13px;

    border:
        1px solid
        rgba(140, 180, 211, .20);

    border-radius: 50%;

    transition:
        opacity .35s ease;
}


@keyframes welcome-activation-spin {

    to {
        transform: rotate(360deg);
    }
}


.activation-process__symbol {

    width: 51px;
    height: auto;

    color:
        var(--welcome-gold);

    opacity: .90;

    transition:
        opacity .35s ease,
        transform .4s ease;
}


.activation-process__check {

    position: absolute;

    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border:
        2px solid
        var(--welcome-green);

    border-radius: 50%;

    background:
        rgba(32,185,133,.07);

    color:
        var(--welcome-green);

    font-size: 1.7rem;
    font-weight: 600;

    opacity: 0;

    transform:
        scale(.65);

    transition:
        opacity .35s ease,
        transform .45s
        cubic-bezier(.18,.9,.34,1.35);
}


.activation-process h2 {

    margin:
        0
        0
        12px;

    color:
        #292a3b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2rem;
    font-weight: 400;
}


.activation-process p {

    margin: 0;

    color:
        var(--welcome-muted);

    font-size: .98rem;
}


/* OPERACIÓN COMPLETADA */

.welcome-view--activating.is-complete
.activation-process__orbit::before,

.welcome-view--activating.is-complete
.activation-process__orbit::after {

    opacity: 0;
}


.welcome-view--activating.is-complete
.activation-process__symbol {

    opacity: 0;

    transform:
        scale(.78);
}


.welcome-view--activating.is-complete
.activation-process__check {

    opacity: 1;

    transform:
        scale(1);
}

/* ============================================================
   LOGIN DESPUÉS DE ACTIVACIÓN
============================================================ */

.welcome-view--login {

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.welcome-view--login[hidden] {
    display: none;
}


.login-ready {

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.login-ready__icon {

    width: 76px;
    height: 76px;

    margin-bottom: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(32,185,133,.07);

    box-shadow:
        0 0 0 8px
        rgba(32,185,133,.03);
}


.login-ready__icon span {

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border:
        2px solid
        var(--welcome-green);

    border-radius: 50%;

    color:
        var(--welcome-green);

    font-size: 1.4rem;
    font-weight: 600;
}


.login-ready h2 {

    margin:
        0
        0
        10px;

    color:
        #292a3b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2.1rem;
    font-weight: 400;
}


.login-ready > p {

    margin:
        0;

    color:
        var(--welcome-muted);

    font-size: .96rem;
}


.login-ready__form {

    width: 100%;
    max-width: 460px;

    margin-top: 29px;

    display: flex;
    flex-direction: column;

    gap: 17px;

    text-align: left;
}


.login-ready__form
.welcome-input-wrap input {

    padding-right: 56px;
}


.login-ready__form
.welcome-input-wrap
.login-ready__username {

    padding-right: 18px;
}


.login-ready__form
.welcome-submit {

    margin-top: 8px;
}
/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    .welcome-shell {
        padding-left: 12px;
        padding-right: 12px;
    }


    .welcome-card {
        width: 100%;
        max-width: none;

        padding-left: 20px;
        padding-right: 20px;
    }

}