/* ================================
   CADASTRO UVT
   ================================ */


/* ================================
   SECTION 1 — VARIÁVEIS
   ================================ */

:root {

    --fundo:
        #07111d;

    --fundo-profundo:
        #040a12;

    --painel:
        rgba(9, 20, 34, 0.78);

    --painel-forte:
        rgba(8, 18, 31, 0.94);

    --texto:
        #f6f8fa;

    --texto-secundario:
        #a8b5c3;

    --dourado:
        #f4b942;

    --dourado-claro:
        #ffd36a;

    --azul:
        #2497ff;

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

    --raio:
        22px;

}


/* ================================
   SECTION 2 — RESET
   ================================ */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-height:
        100vh;

    color:
        var(--texto);

    background:
        var(--fundo);

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

}


button,
input,
select,
textarea {

    font:
        inherit;

}


a {

    color:
        inherit;

}


/* ================================
   SECTION 3 — HERO
   ================================ */

.hero {

    position:
        relative;

    min-height:
        100vh;

    overflow:
        hidden;

    background:
        var(--fundo-profundo);

}


.hero__fundo {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(3, 9, 17, 0.96) 0%,
            rgba(3, 9, 17, 0.83) 40%,
            rgba(3, 9, 17, 0.36) 72%,
            rgba(3, 9, 17, 0.58) 100%
        ),

        url("../assets/minha-conta-bg.png")
        center / cover
        no-repeat;

}


.hero__fundo::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(4, 10, 18, 0.85) 100%
        );

}


/* ================================
   SECTION 4 — HERO CONTEÚDO
   ================================ */

.hero__conteudo {

    position:
        relative;

    z-index:
        1;

    width:
        min(100% - 48px, 1240px);

    min-height:
        100vh;

    margin:
        0 auto;

    padding:
        30px 0;

    display:
        grid;

    grid-template-rows:
        auto 1fr auto;

}


/* ================================
   SECTION 5 — TOPO
   ================================ */

.hero__topo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

}


.marca {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.marca__icone {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

}


.marca__texto {

    display:
        grid;

    gap:
        3px;

}


.marca__ecossistema {

    color:
        var(--dourado);

    font-size:
        0.69rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.marca strong {

    font-size:
        0.93rem;

    font-weight:
        700;

}


.hero__nav {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.hero__admin {

    color:
        rgba(255, 255, 255, 0.64);

    font-size:
        0.77rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color 0.18s ease;

}


.hero__admin:hover {

    color:
        var(--dourado);

}


/* ================================
   SECTION 6 — HERO PRINCIPAL
   ================================ */

.hero__principal {

    align-self:
        center;

    padding:
        90px 0 70px;

}


.hero__texto {

    max-width:
        720px;

}


.etiqueta {

    margin:
        0 0 14px;

    color:
        var(--dourado);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.hero h1 {

    margin:
        0;

    max-width:
        760px;

    font-size:
        clamp(
            3.7rem,
            8vw,
            7rem
        );

    line-height:
        0.92;

    letter-spacing:
        -0.06em;

}


.hero h1 span {

    display:
        block;

    color:
        var(--dourado-claro);

}


.hero__descricao {

    max-width:
        620px;

    margin:
        26px 0 0;

    color:
        #d1dbe5;

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.2rem
        );

    line-height:
        1.65;

}


.hero__botoes {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        32px;

}


/* ================================
   SECTION 7 — MÓDULOS
   ================================ */

.hero__modulos {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        42px;

}


.hero__modulos span {

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        999px;

    color:
        rgba(255, 255, 255, 0.68);

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

    font-size:
        0.76rem;

}


/* ================================
   SECTION 8 — ASSINATURA
   ================================ */

.hero__assinatura {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        0.82rem;

}


.hero__assinatura span {

    width:
        52px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--dourado),
            transparent
        );

}


.hero__assinatura p {

    margin:
        0;

}


/* ================================
   SECTION 9 — BOTÕES
   ================================ */

.botao {

    min-height:
        48px;

    padding:
        0 20px;

    border:
        1px solid transparent;

    border-radius:
        13px;

    font:
        inherit;

    font-weight:
        800;

    cursor:
        pointer;

    text-decoration:
        none;

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

}


.botao:hover {

    transform:
        translateY(-1px);

}


.botao--principal {

    color:
        #06101d;

    background:
        linear-gradient(
            135deg,
            var(--dourado-claro),
            var(--dourado)
        );

}


.botao--leve {

    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.12);

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

}


.botao--entrada {

    min-height:
        42px;

    padding:
        0 17px;

    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.14);

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

}


/* ================================
   SECTION 10 — PÁGINA
   ================================ */

.pagina {

    width:
        min(100% - 40px, 1160px);

    margin:
        0 auto;

    padding:
        90px 0 50px;

}


.secao {

    padding-bottom:
        100px;

}


.secao__cabecalho {

    max-width:
        720px;

    margin-bottom:
        34px;

}


.secao__cabecalho h2 {

    margin:
        0;

    font-size:
        clamp(
            2.1rem,
            5vw,
            3.7rem
        );

    line-height:
        1;

    letter-spacing:
        -0.045em;

}


.secao__cabecalho > p:last-child {

    margin:
        18px 0 0;

    color:
        var(--texto-secundario);

    line-height:
        1.7;

}


/* ================================
   SECTION 11 — FLUXO
   ================================ */

.fluxo {

    display:
        grid;

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

    gap:
        12px;

    margin-bottom:
        30px;

}


.fluxo__item {

    padding:
        20px;

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

    border-radius:
        17px;

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

}


.fluxo__item span {

    display:
        block;

    margin-bottom:
        24px;

    color:
        var(--dourado);

    font-size:
        0.73rem;

    font-weight:
        800;

}


.fluxo__item h3 {

    margin:
        0;

    font-size:
        1rem;

}


.fluxo__item p {

    margin:
        10px 0 0;

    color:
        var(--texto-secundario);

    font-size:
        0.87rem;

    line-height:
        1.55;

}


/* ================================
   SECTION 12 — AMBIENTES
   ================================ */

.ambientes {

    display:
        grid;

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

    gap:
        12px;

}


.ambiente {

    min-height:
        140px;

    padding:
        22px;

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

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );

}


.ambiente strong {

    display:
        block;

    font-size:
        1rem;

}


.ambiente p {

    margin:
        10px 0 0;

    color:
        var(--texto-secundario);

    line-height:
        1.55;

}


/* ================================
   SECTION 13 — AUTENTICAÇÃO
   ================================ */

.secao--autenticacao {

    max-width:
        680px;

    margin:
        0 auto;

}


.painel {

    padding:
        30px;

    border:
        1px solid
        rgba(244, 185, 66, 0.20);

    border-radius:
        var(--raio);

    background:
        var(--painel-forte);

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.28);

}


.painel__cabecalho {

    margin-bottom:
        24px;

}


.painel__cabecalho h2 {

    margin:
        0;

    font-size:
        2.2rem;

}


.painel__cabecalho p {

    margin:
        8px 0 0;

    color:
        var(--texto-secundario);

}


/* ================================
   SECTION 14 — CAMPOS
   ================================ */

.campo {

    display:
        grid;

    gap:
        7px;

    margin-bottom:
        17px;

}


.campo label {

    color:
        #dce4ec;

    font-size:
        0.86rem;

    font-weight:
        700;

}


.campo input,
.campo select {

    width:
        100%;

    min-height:
        48px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        11px;

    outline:
        none;

    color:
        #ffffff;

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

}


.campo input:focus,
.campo select:focus {

    border-color:
        rgba(244, 185, 66, 0.5);

    box-shadow:
        0 0 0 4px
        rgba(244, 185, 66, 0.07);

}


.campo select option {

    color:
        #111820;

}


.botao-link {

    display:
        block;

    width:
        100%;

    padding:
        12px 0;

    border:
        0;

    background:
        transparent;

    color:
        #8fc5f7;

    font:
        inherit;

    font-size:
        0.86rem;

    font-weight:
        700;

    cursor:
        pointer;

}


/* ================================
   SECTION 15 — MENSAGEM
   ================================ */

.mensagem {

    margin-bottom:
        20px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(36, 151, 255, 0.24);

    border-radius:
        12px;

    background:
        rgba(36, 151, 255, 0.07);

}


/* ================================
   SECTION 16 — RODAPÉ
   ================================ */

.rodape {

    padding:
        40px 0 20px;

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

}


.rodape__topo {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        30px;

    padding-bottom:
        28px;

}


.rodape__marca {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.rodape__marca img {

    width:
        46px;

    height:
        46px;

    object-fit:
        contain;

}


.rodape__marca div {

    display:
        grid;

    gap:
        3px;

}


.rodape__marca span,
.rodape__topo > p {

    color:
        var(--texto-secundario);

    font-size:
        0.81rem;

}


.rodape__grade {

    display:
        grid;

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

    gap:
        30px;

    padding:
        30px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

}


.rodape__grade nav,
.rodape__grade > div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        9px;

}


.rodape__grade h3 {

    margin:
        0 0 6px;

    color:
        var(--dourado);

    font-size:
        0.72rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.rodape__grade a,
.rodape__grade button {

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #bbc6d1;

    text-decoration:
        none;

    font:
        inherit;

    font-size:
        0.84rem;

    cursor:
        pointer;

}


.rodape__grade p {

    margin:
        0;

    color:
        var(--texto-secundario);

    font-size:
        0.84rem;

    line-height:
        1.55;

}


.rodape__base {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        18px;

    color:
        #788695;

    font-size:
        0.75rem;

}


/* ================================
   SECTION 17 — UTILITÁRIOS
   ================================ */

[hidden] {

    display:
        none !important;

}


/* ================================
   SECTION 18 — TABLET
   ================================ */

@media (
    max-width: 960px
) {

    .fluxo {

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

    }


    .ambientes {

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

    }


    .rodape__grade {

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

    }

}


/* ================================
   SECTION 19 — MOBILE
   ================================ */

@media (
    max-width: 680px
) {

    .hero__conteudo {

        width:
            min(100% - 24px, 1240px);

        padding:
            18px 0 24px;

    }


    .marca__icone {

        width:
            46px;

        height:
            46px;

    }


    .marca strong {

        font-size:
            0.81rem;

    }


    .marca__ecossistema {

        font-size:
            0.58rem;

    }


    .hero__nav {

        gap:
            9px;

    }


    .hero__admin {

        display:
            none;

    }


    .hero__principal {

        padding:
            70px 0 48px;

    }


    .hero h1 {

        font-size:
            clamp(
                3.3rem,
                15vw,
                5rem
            );

    }


    .hero__botoes {

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .hero__botoes .botao {

        width:
            100%;

    }


    .pagina {

        width:
            min(100% - 24px, 1160px);

        padding-top:
            60px;

    }


    .secao {

        padding-bottom:
            70px;

    }


    .fluxo,
    .ambientes {

        grid-template-columns:
            1fr;

    }


    .painel {

        padding:
            22px;

    }


    .rodape__topo {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .rodape__grade {

        grid-template-columns:
            1fr;

    }


    .rodape__base {

        flex-direction:
            column;

        gap:
            6px;

    }

}
/* Links de ação reutilizam o mesmo componente de botão. */
a.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}