body{
    font-family: Arial, sans-serif;
    background:rgb(255, 255, 255);
    display:flex;
    flex-direction:column;
    margin:0;
    min-height:100vh;
}

/* TOPO */
.topo{
    width:100%;
    background:white;
    padding:20px 0;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.logo-topo{
    width:320px;
    max-width:90%;
}

/* CONTAINER */
.container{
    background:white;
    width:100%;
    max-width:500px;
    margin:30px auto;
    padding:30px;
    box-sizing:border-box;
    border-radius:20px;
    box-shadow:0 0 20px rgba(0,0,0,.15);
    flex:1;
}

h1{
    text-align:center;
    color:#FFA000;
    margin-bottom:25px;
}

input,
select,
textarea{
    width:100%;
    padding:14px;
    margin:10px 0;
    border:1px solid #ddd;
    border-radius:10px;
    box-sizing:border-box;
    font-family: Arial, sans-serif;
    font-size:16px;
}

textarea{
    min-height:90px;
    resize:none;
}

/* CHECKBOX */
.checkbox-area{
    margin:15px 0;
}

.checkbox-label{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:14px;
    line-height:1.5;
    margin:15px 0;
}

.checkbox-label input{
    width:auto;
    margin-top:3px;
}

.checkbox-label a{
    color:#cb00fd;
    text-decoration:none;
    font-weight:bold;
    display:block;
    margin-top:5px;
}

.checkbox-label a:hover{
    text-decoration:underline;
}

.opcional{
    margin-left:4px;
    color:#999;
    font-size:15px;
}

/* BOTÃO */
button{
    width:100%;
    padding:14px;
    background:#FFA000;
    border:none;
    color:white;
    border-radius:10px;
    cursor:pointer;
    margin-top:10px;
    font-size:16px;
    font-weight:bold;
}

button:hover{
    opacity:.9;
}

#mensagem{
    text-align:center;
    margin-top:15px;
    font-weight:bold;
}

/* RODAPÉ */
.rodape{
    width:100%;
    background:#cb00fd;
    padding:35px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:70px;
    box-shadow:0 -2px 10px rgba(0,0,0,.08);
}

.rodape a{
    font-size:45px;
    color:#fdfdfd;
    text-decoration:none;
    transition:.3s;
}

.rodape a:hover{
    transform:scale(1.15);
    opacity:.8;
}

/* TELA DE SUCESSO */
.container-sucesso{
    min-height:65vh !important;
    flex:1 !important;

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

    padding:40px !important;
    margin:30px auto !important;
}

.container-sucesso .tela-sucesso{
    width:100%;
    text-align:center;
    padding:0 !important;
}

.tela-sucesso h2{
    color:#28a745;
    margin-bottom:20px;
}

.tela-sucesso strong{
    display:block;
    color:#cb00fd;
    margin:15px 0;
    font-size:15px;
    word-break:break-word;
}

.tela-sucesso p{
    font-size:16px;
    line-height:1.5;
}

/* MOBILE */
@media(max-width:768px){

    .topo{
        padding:15px 0;
    }

    .logo-topo{
        width:300px;
    }

    .container{
        width:100%;
        margin:0;
        min-height:auto;
        border-radius:0;
        padding:22px;
    }

    h1{
        font-size:24px;
    }

    .rodape{
        padding:35px 0;
        gap:60px !important;
        box-shadow:0 -8px 30px rgba(0,0,0,.25);
    }

    .rodape a{
        font-size:50px !important;
    }

    .container-sucesso{
        min-height:calc(100vh - 250px) !important;
        flex:1 !important;

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

        padding:35px 22px !important;
        margin:0 auto !important;
    }
}