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

* {
    box-sizing: border-box;
}

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

html {
    overflow-x: hidden;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at top,
            #ffffff 0%,
            #f5f8fc 45%,
            #e9f0f7 100%
        );

    color: #172033;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    overscroll-behavior: none;

    overflow-x: hidden;
}


/* =========================================================
   PÁGINA
========================================================= */

.pagina-cadastro-touch {
    width: 100%;
    min-height: 100dvh;

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

    padding:
        clamp(8px, 1.5vh, 20px)
        clamp(10px, 2vw, 22px);
}


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

.caixa-cadastro-touch {
    width: min(100%, 980px);

    padding:
        clamp(16px, 2.3vh, 28px)
        clamp(18px, 2.3vw, 30px);

    background:
        rgba(255, 255, 255, 0.97);

    border:
        1px solid
        rgba(216, 225, 237, 0.95);

    border-radius:
        clamp(18px, 2vw, 28px);

    box-shadow:
        0 22px 65px
        rgba(31, 50, 77, 0.12);
}


/* =========================================================
   TOPO
========================================================= */

.topo-cadastro {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom:
        clamp(12px, 2vh, 22px);
}


.marca-sistema {
    display: flex;
    align-items: center;

    gap: 11px;
}


.marca-icone {
    width:
        clamp(42px, 5vh, 50px);

    height:
        clamp(42px, 5vh, 50px);

    flex-shrink: 0;

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

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color: #ffffff;

    font-size:
        clamp(14px, 1.7vh, 17px);

    font-weight: 800;

    box-shadow:
        0 7px 18px
        rgba(37, 99, 235, 0.23);
}


.marca-textos {
    display: flex;
    flex-direction: column;
}


.marca-textos strong {
    font-size:
        clamp(15px, 1.8vh, 18px);
}


.marca-textos span {
    margin-top: 1px;

    color: #8490a3;

    font-size:
        clamp(10px, 1.3vh, 12px);
}


.botao-voltar-topo {
    padding:
        clamp(8px, 1vh, 10px)
        15px;

    border:
        1px solid #dce4ef;

    border-radius: 12px;

    color: #637087;

    background: #ffffff;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.cabecalho-cadastro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 25px;

    margin-bottom:
        clamp(13px, 2vh, 23px);
}


.etiqueta-cadastro {
    display: inline-flex;

    margin-bottom:
        clamp(4px, 0.7vh, 8px);

    padding: 5px 9px;

    border-radius: 8px;

    background: #edf4ff;

    color: #2563eb;

    font-size:
        clamp(9px, 1.2vh, 11px);

    font-weight: 700;

    text-transform: uppercase;
}


.cabecalho-cadastro h1 {
    margin: 0;

    color: #111827;

    font-size:
        clamp(27px, 3.6vh, 37px);

    line-height: 1.05;
}


.cabecalho-cadastro p {
    margin:
        clamp(5px, 0.8vh, 9px)
        0
        0;

    color: #69778c;

    font-size:
        clamp(12px, 1.55vh, 15px);

    line-height: 1.35;
}


.progresso-cadastro {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding: 10px 14px;

    border-radius: 13px;

    background: #f5f8fc;
}


.progresso-cadastro span {
    color: #8a96a8;

    font-size: 10px;
}


.progresso-cadastro strong {
    margin-top: 2px;

    color: #344054;

    font-size: 12px;
}


/* =========================================================
   ERRO
========================================================= */

.cadastro-erro {
    margin-bottom: 12px;
}


/* =========================================================
   GRID DO FORMULÁRIO
========================================================= */

.grade-cadastro-touch {
    display: grid;

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

    column-gap:
        clamp(12px, 1.5vw, 18px);

    row-gap:
        clamp(8px, 1.25vh, 15px);
}


.campo-completo {
    grid-column: 1 / -1;
}


/* =========================================================
   CAMPOS
========================================================= */

.campo-touch {
    min-width: 0;
}


.campo-touch > label,
.titulo-campo-email > label {
    display: block;

    margin-bottom:
        clamp(4px, 0.6vh, 7px);

    color: #344054;

    font-size:
        clamp(11px, 1.4vh, 13px);

    font-weight: 700;
}


.campo-touch label small {
    margin-left: 5px;

    color: #94a0b1;

    font-size: 9px;

    font-weight: 500;
}


.input-touch {
    position: relative;

    width: 100%;
}


.input-touch input {
    width: 100%;

    height:
        clamp(46px, 6vh, 60px);

    padding:
        0 44px
        0 16px;

    border:
        2px solid #dde5ef;

    border-radius:
        clamp(12px, 1.2vw, 15px);

    outline: none;

    background: #fafbfd;

    color: #172033;

    font-size:
        clamp(14px, 1.8vh, 17px);

    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease;
}


.input-touch input:focus,
.input-touch input.campo-ativo {
    border-color: #2563eb;

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, 0.09);
}


.input-touch input:active {
    transform: scale(0.995);
}


.icone-input {
    position: absolute;

    right: 16px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #9ba7b9;

    font-size: 20px;

    pointer-events: none;
}


.indicacao-toque {
    position: absolute;

    right: 13px;
    top: 50%;

    transform:
        translateY(-50%);

    padding:
        5px 8px;

    border-radius: 7px;

    background: #edf4ff;

    color: #2563eb;

    font-size: 9px;
    font-weight: 700;

    pointer-events: none;
}


/* =========================================================
   TELEFONE
========================================================= */

.grupo-telefone-touch {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.62fr)
        minmax(260px, 1.38fr);

    gap: 14px;
}


.campo-pais-touch,
.campo-numero-touch {
    min-width: 0;
}


.subtitulo-campo {
    display: block;

    margin-bottom:
        clamp(3px, 0.5vh, 6px);

    color: #7f8a9c;

    font-size:
        clamp(9px, 1.15vh, 11px);

    font-weight: 600;
}


.campo-pais-touch select {
    width: 100%;

    height:
        clamp(46px, 6vh, 60px);

    padding: 0 14px;

    border:
        2px solid #dde5ef;

    border-radius:
        clamp(12px, 1.2vw, 15px);

    outline: none;

    background: #fafbfd;

    color: #263245;

    font-size:
        clamp(12px, 1.6vh, 14px);

    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   EMAIL
========================================================= */

.titulo-campo-email {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-bottom:
        clamp(4px, 0.6vh, 7px);
}


.titulo-campo-email > label {
    margin: 0;
}


.opcao-sem-email {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #68758a;

    font-size:
        clamp(9px, 1.2vh, 11px);

    font-weight: 600;

    cursor: pointer;
}


.opcao-sem-email input {
    width:
        clamp(15px, 2vh, 18px);

    height:
        clamp(15px, 2vh, 18px);

    cursor: pointer;
}


/* =========================================================
   LGPD
========================================================= */

.grupo-lgpd-touch {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top:
        clamp(9px, 1.3vh, 17px);

    padding:
        clamp(9px, 1.3vh, 14px);

    border:
        1px solid #dce6f3;

    border-radius: 14px;

    background: #f7faff;
}


.grupo-lgpd-touch input {
    width:
        clamp(17px, 2.2vh, 21px);

    height:
        clamp(17px, 2.2vh, 21px);

    flex-shrink: 0;

    margin-top: 1px;

    cursor: pointer;
}


.grupo-lgpd-touch label {
    color: #5f6d82;

    font-size:
        clamp(9px, 1.25vh, 12px);

    line-height: 1.35;

    cursor: pointer;
}


/* =========================================================
   BOTÃO FINALIZAR
========================================================= */

.botao-finalizar {
    width: 100%;

    height:
        clamp(46px, 6vh, 58px);

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

    gap: 12px;

    margin-top:
        clamp(8px, 1.2vh, 15px);

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color: #ffffff;

    font-size:
        clamp(13px, 1.7vh, 16px);

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(37, 99, 235, 0.20);
}


.botao-finalizar:active {
    transform: scale(0.99);
}


/* =========================================================
   FUNDO DO TECLADO
========================================================= */

.fundo-teclado-cadastro {
    position: fixed;

    inset: 0;

    z-index: 900;

    background:
        rgba(9, 18, 32, 0.42);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.fundo-teclado-cadastro.ativo {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   TECLADO
========================================================= */

.teclado-cadastro {
    position: fixed;

    left: 50%;

    bottom:
        max(
            10px,
            env(safe-area-inset-bottom)
        );

    z-index: 1000;

    width:
        min(
            calc(100% - 20px),
            760px
        );

    transform:
        translate(
            -50%,
            calc(100% + 50px)
        );

    opacity: 0;

    visibility: hidden;

    transition:
        transform 0.27s ease,
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.teclado-cadastro.ativo {
    transform:
        translate(-50%, 0);

    opacity: 1;

    visibility: visible;
}


.teclado-cadastro-conteudo {
    padding:
        clamp(11px, 1.8vh, 18px);

    border:
        1px solid #e0e7ef;

    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 28px 80px
        rgba(8, 21, 42, 0.28);
}


/* =========================================================
   TOPO DO TECLADO
========================================================= */

.teclado-cadastro-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom:
        clamp(8px, 1.3vh, 14px);
}


.teclado-cadastro-topo > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.teclado-cadastro-topo span {
    color: #8290a4;

    font-size: 11px;
    font-weight: 600;
}


.teclado-cadastro-topo strong {
    min-height: 22px;

    margin-top: 2px;

    overflow: hidden;

    color: #172033;

    font-size:
        clamp(16px, 2.2vh, 20px);

    text-overflow: ellipsis;
    white-space: nowrap;
}


.fechar-teclado-cadastro {
    width:
        clamp(38px, 5vh, 43px);

    height:
        clamp(38px, 5vh, 43px);

    flex-shrink: 0;

    border: 0;
    border-radius: 12px;

    background: #f0f3f7;

    color: #657186;

    font-size: 24px;

    cursor: pointer;
}


/* =========================================================
   TECLAS
========================================================= */

.area-teclas {
    display: grid;

    grid-template-columns:
        repeat(10, 1fr);

    gap:
        clamp(4px, 0.7vh, 7px);
}


.tecla {
    min-width: 0;

    height:
        clamp(39px, 5.2vh, 51px);

    padding: 0 4px;

    border:
        1px solid #dbe3ed;

    border-radius: 10px;

    background: #f7f9fc;

    color: #1f2937;

    font-size:
        clamp(13px, 1.8vh, 17px);

    font-weight: 700;

    cursor: pointer;

    touch-action: manipulation;

    transition:
        transform 0.07s ease,
        background 0.07s ease;
}


.tecla:active {
    transform: scale(0.94);

    background: #e8eef7;
}


.tecla.tecla-espaco {
    grid-column:
        span 5;

    font-size: 12px;
}


.tecla.tecla-email-larga {
    grid-column:
        span 2;

    font-size: 13px;
}


/* =========================================================
   TECLADO NUMÉRICO
========================================================= */

.area-teclas.teclado-numerico {
    width:
        min(
            100%,
            410px
        );

    margin:
        0 auto;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        clamp(6px, 0.9vh, 9px);
}


.area-teclas.teclado-numerico
.tecla {
    height:
        clamp(44px, 6vh, 58px);

    font-size:
        clamp(17px, 2.3vh, 22px);
}


/* =========================================================
   AÇÕES DO TECLADO
========================================================= */

.acoes-teclado {
    display: grid;

    grid-template-columns:
        minmax(130px, 0.35fr)
        minmax(190px, 0.65fr);

    gap: 9px;

    margin-top:
        clamp(7px, 1.1vh, 12px);
}


.botao-teclado-secundario,
.botao-teclado-principal {
    height:
        clamp(43px, 5.5vh, 54px);

    border: 0;

    border-radius: 13px;

    font-size:
        clamp(12px, 1.6vh, 14px);

    font-weight: 700;

    cursor: pointer;
}


.botao-teclado-secundario {
    background: #f0f3f7;

    color: #566277;
}


.botao-teclado-principal {
    background: #2563eb;

    color: #ffffff;
}


/* =========================================================
   MODO TOUCH HORIZONTAL
   PRINCIPAL PARA O ARMÁRIO
========================================================= */

@media
    (min-width: 800px)
    and (max-height: 900px) {

    .pagina-cadastro-touch {
        min-height: 100dvh;

        padding:
            7px
            15px;
    }


    .caixa-cadastro-touch {
        width:
            min(
                100%,
                960px
            );

        padding:
            14px
            26px;

        border-radius: 22px;
    }


    .topo-cadastro {
        margin-bottom: 8px;
    }


    .marca-icone {
        width: 41px;
        height: 41px;
    }


    .marca-textos strong {
        font-size: 15px;
    }


    .marca-textos span {
        font-size: 10px;
    }


    .botao-voltar-topo {
        padding:
            7px
            12px;
    }


    .cabecalho-cadastro {
        margin-bottom: 10px;
    }


    .etiqueta-cadastro {
        margin-bottom: 3px;

        padding:
            4px
            8px;

        font-size: 9px;
    }


    .cabecalho-cadastro h1 {
        font-size: 27px;
    }


    .cabecalho-cadastro p {
        margin-top: 3px;

        font-size: 12px;
    }


    .progresso-cadastro {
        padding:
            7px
            11px;
    }


    .grade-cadastro-touch {
        row-gap: 7px;

        column-gap: 15px;
    }


    .campo-touch > label,
    .titulo-campo-email > label {
        margin-bottom: 3px;

        font-size: 11px;
    }


    .subtitulo-campo {
        margin-bottom: 2px;

        font-size: 9px;
    }


    .input-touch input,
    .campo-pais-touch select {
        height: 45px;

        border-radius: 12px;
    }


    .input-touch input {
        font-size: 14px;
    }


    .campo-pais-touch select {
        font-size: 12px;
    }


    .grupo-lgpd-touch {
        margin-top: 7px;

        padding: 8px 11px;
    }


    .grupo-lgpd-touch label {
        font-size: 9px;

        line-height: 1.25;
    }


    .botao-finalizar {
        height: 44px;

        margin-top: 7px;

        font-size: 13px;
    }

}


/* =========================================================
   TELAS AINDA MAIS BAIXAS
========================================================= */

@media
    (min-width: 800px)
    and (max-height: 760px) {

    .pagina-cadastro-touch {
        align-items: center;

        padding:
            4px
            12px;
    }


    .caixa-cadastro-touch {
        padding:
            9px
            22px;
    }


    .topo-cadastro {
        margin-bottom: 5px;
    }


    .marca-icone {
        width: 36px;
        height: 36px;

        border-radius: 11px;
    }


    .marca-textos span {
        display: none;
    }


    .cabecalho-cadastro {
        margin-bottom: 6px;
    }


    .etiqueta-cadastro {
        display: none;
    }


    .cabecalho-cadastro h1 {
        font-size: 23px;
    }


    .cabecalho-cadastro p {
        font-size: 10px;
    }


    .progresso-cadastro {
        display: none;
    }


    .grade-cadastro-touch {
        row-gap: 4px;
    }


    .campo-touch > label,
    .titulo-campo-email > label {
        margin-bottom: 2px;

        font-size: 10px;
    }


    .input-touch input,
    .campo-pais-touch select {
        height: 39px;
    }


    .input-touch input {
        font-size: 13px;
    }


    .grupo-lgpd-touch {
        margin-top: 4px;

        padding:
            6px
            9px;
    }


    .grupo-lgpd-touch label {
        font-size: 8px;
    }


    .botao-finalizar {
        height: 39px;

        margin-top: 4px;
    }

}


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

@media (max-width: 780px) {

    .pagina-cadastro-touch {
        align-items: flex-start;

        padding:
            12px
            10px
            18px;
    }


    .caixa-cadastro-touch {
        padding: 19px;

        border-radius: 20px;
    }


    .cabecalho-cadastro {
        display: block;
    }


    .progresso-cadastro {
        display: none;
    }


    .grade-cadastro-touch {
        grid-template-columns:
            1fr;

        gap: 11px;
    }


    .campo-completo {
        grid-column: auto;
    }


    .grupo-telefone-touch {
        grid-template-columns:
            1fr;
    }


    .input-touch input,
    .campo-pais-touch select {
        height: 54px;
    }


    .indicacao-toque {
        display: none;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 520px) {

    .topo-cadastro {
        margin-bottom: 15px;
    }


    .marca-textos span {
        display: none;
    }


    .botao-voltar-topo {
        padding:
            8px
            10px;

        font-size: 10px;
    }


    .cabecalho-cadastro h1 {
        font-size: 25px;
    }


    .cabecalho-cadastro p {
        font-size: 12px;
    }


    .teclado-cadastro {
        width:
            calc(
                100% - 8px
            );

        bottom: 4px;
    }


    .teclado-cadastro-conteudo {
        padding: 10px;

        border-radius: 17px;
    }


    .area-teclas {
        gap: 4px;
    }


    .tecla {
        height: 42px;

        padding: 0 2px;

        font-size: 12px;
    }


    .acoes-teclado {
        grid-template-columns:
            0.4fr
            0.6fr;

        gap: 6px;
    }

}