:root {

    --fundo: #0d0f14;
    --fundo-2: #151923;
    --card: #191e29;

    --texto: #f4f5f7;
    --texto-2: #b8c0cc;

    --borda:
        rgba(255, 255, 255, 0.10);

    --vermelho:
        #ed1c2f;

    --vermelho-2:
        #ff4050;

    --verde:
        #27c281;

    --raio:
        22px;
}

* {

    box-sizing:
        border-box;
}

html {

    scroll-behavior:
        smooth;
}

body {

    margin:
        0;

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

    color:
        var(--texto);

    background:
        var(--fundo);

    line-height:
        1.6;
}

a {

    color:
        inherit;

    text-decoration:
        none;
}

button,
input,
textarea {

    font:
        inherit;
}

.container {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin:
        0 auto;
}

.topo {

    position:
        sticky;

    top:
        0;

    z-index:
        50;

    border-bottom:
        1px solid var(--borda);

    background:
        rgba(
            13,
            15,
            20,
            0.92
        );

    backdrop-filter:
        blur(18px);
}

.topo-conteudo {

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}

.marca {

    display:
        flex;

    gap:
        8px;

    align-items:
        baseline;

    font-weight:
        900;
}

.marca-048 {

    font-size:
        1.7rem;
}

.marca-tech {

    color:
        var(--vermelho);

    font-size:
        0.95rem;

    letter-spacing:
        0.12em;
}

.menu {

    display:
        flex;

    gap:
        24px;

    color:
        var(--texto-2);
}

.menu a:hover {

    color:
        white;
}

.botao {

    border:
        0;

    border-radius:
        14px;

    padding:
        13px 18px;

    cursor:
        pointer;

    font-weight:
        800;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}

.botao-primario {

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--vermelho),
            var(--vermelho-2)
        );
}

.botao-secundario {

    color:
        white;

    background:
        transparent;

    border:
        1px solid var(--borda);
}

.secao {

    padding:
        70px 0;
}

.autenticacao {

    min-height:
        calc(
            100vh - 76px
        );
}

.cabecalho {

    max-width:
        720px;

    margin-bottom:
        36px;
}

.rotulo {

    color:
        #ff6875;

    font-size:
        0.76rem;

    font-weight:
        900;

    letter-spacing:
        0.16em;
}

h1 {

    margin:
        8px 0 12px;

    font-size:
        clamp(
            2.4rem,
            6vw,
            4.5rem
        );

    letter-spacing:
        -0.05em;

    line-height:
        1;
}

h2 {

    margin-top:
        0;

    font-size:
        1.7rem;
}

p {

    color:
        var(--texto-2);
}

.grade-autenticacao {

    display:
        grid;

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

    gap:
        22px;
}

.card {

    padding:
        28px;

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

    border-radius:
        var(--raio);

    background:
        var(--card);
}

.card label {

    display:
        grid;

    gap:
        7px;

    margin-bottom:
        16px;

    font-weight:
        700;
}

input,
textarea {

    width:
        100%;

    padding:
        14px 15px;

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

    border-radius:
        13px;

    outline:
        none;

    background:
        #10141c;

    color:
        white;
}

input:focus,
textarea:focus {

    border-color:
        var(--vermelho);
}

.aceite {

    grid-template-columns:
        auto 1fr !important;

    align-items:
        start;
}

.aceite input {

    width:
        auto;

    margin-top:
        6px;
}

.mensagem {

    margin-top:
        14px;

    color:
        var(--texto-2);
}

.mensagem.erro {

    color:
        #ff7985;
}

.mensagem.sucesso {

    color:
        #55d69b;
}

.painel-cabecalho {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    align-items:
        end;

    margin-bottom:
        36px;
}

.indicadores {

    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        30px;
}

.indicador {

    padding:
        22px;

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

    border-radius:
        18px;

    background:
        var(--card);
}

.indicador span {

    display:
        block;

    color:
        var(--texto-2);
}

.indicador strong {

    display:
        block;

    margin-top:
        5px;

    font-size:
        1.8rem;
}

.pedido-pendente {

    margin-bottom:
        40px;
}

.produto-selecionado {

    padding:
        18px;

    margin:
        18px 0;

    border-radius:
        16px;

    background:
        #10141c;
}

.secao-interna {

    padding:
        38px 0;
}

.titulo-secao {

    margin-bottom:
        20px;
}

.lista-pedidos {

    display:
        grid;

    gap:
        14px;
}

.pedido {

    padding:
        22px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        20px;

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

    border-radius:
        18px;

    background:
        var(--card);
}

.pedido h3 {

    margin:
        0 0 7px;
}

.status {

    display:
        inline-flex;

    padding:
        6px 10px;

    border-radius:
        999px;

    color:
        #ffd1d5;

    background:
        rgba(
            237,
            28,
            47,
            0.15
        );

    font-size:
        0.75rem;

    font-weight:
        900;
}

.dados-grid {

    display:
        grid;

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

    gap:
        18px;
}

.dado {

    padding:
        15px;

    border-radius:
        14px;

    background:
        #10141c;
}

.dado span {

    color:
        var(--texto-2);

    display:
        block;

    font-size:
        0.8rem;
}

.dado strong {

    display:
        block;

    margin-top:
        3px;
}

.vazio {

    padding:
        24px;

    border:
        1px dashed var(--borda);

    border-radius:
        18px;

    color:
        var(--texto-2);
}

.rodape {

    padding:
        30px 0;

    border-top:
        1px solid var(--borda);
}

.rodape p {

    margin-bottom:
        0;
}

@media (
    max-width:
        800px
) {

    .menu {

        display:
            none;
    }

    .grade-autenticacao,
    .indicadores,
    .dados-grid {

        grid-template-columns:
            1fr;
    }

    .painel-cabecalho {

        display:
            grid;

        align-items:
            start;
    }

    .pedido {

        grid-template-columns:
            1fr;
    }
}
/* ACABAMENTO 048 TECH */
[hidden]{display:none!important}
.botao-link{appearance:none;background:transparent;border:0;color:#ff3048;cursor:pointer;font:inherit;font-weight:700;margin-top:14px;padding:4px 0;text-decoration:none}
.botao-link:hover{text-decoration:underline}
.botao-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}