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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Roboto',sans-serif;

   background: #FFE600;

    color:#333;

    display:flex;

    justify-content:center;

    padding:30px 15px;

    min-height:100vh;

}


/*====================================================
            CONTAINER
====================================================*/

.container{

    width:100%;

    max-width:480px;

}



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

.topo{

    text-align:center;

    margin-bottom:25px;

}

#imgLogo{

    width:220px;

    max-width:100%;

}



/*====================================================
            TÍTULOS
====================================================*/

.tituloPrincipal{

    font-size:36px;

    font-weight:900;

    text-align:center;

    color:#2D3277;

    margin-bottom:8px;

}

.subTitulo{

    text-align:center;

    color:#000000;

    margin-bottom:25px;

    font-size:18px;

}



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

.card{

    background:#FFFFFF;

    border-radius:18px;

    padding:25px;

    box-shadow:

    0 10px 35px rgba(0,0,0,.15);

}



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

.grupoCampo{

    margin-bottom:20px;

}

.grupoCampo label{

    display:block;

    font-size:14px;

    font-weight:700;

    color:#444;

    margin-bottom:8px;

}



.grupoCampo input{

    width:100%;

    height:55px;

    border:2px solid #DDD;

    border-radius:12px;

    padding:15px;

    font-size:18px;

    outline:none;

    transition:.25s;

}

.grupoCampo input:focus{

    border-color:#3483FA;

    box-shadow:0 0 0 4px rgba(52,131,250,.15);

}





/*====================================================
            BOTÕES
====================================================*/

button{

    width:100%;

    height:58px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    transition:.25s;

}



#btnCalcular{

    background:#3483FA;

    color:#FFF;

}

#btnCalcular:hover{

    background:#2968C8;

}



#btnVoltar{

    background:#FFE600;

    color:#333;

    margin-top:20px;

}

#btnVoltar:hover{

    background:#FFD500;

}





/*====================================================
                RESULTADO
====================================================*/

#preencherCampos{

    display:flex;

    flex-direction:column;

    gap:20px;

}

#resultado{

    display:flex;

    flex-direction:column;

    gap:20px;

}



#resultado h2{

    text-align:center;

    color:#2D3277;

    font-size:30px;

    font-weight:900;

}



#caixaResultado{

    width:100%;

    min-height:260px;

    background:#FFF;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 35px rgba(0,0,0,.15);

    font-size:17px;

    line-height:1.7;

    white-space:pre-wrap;

}



#btnVoltar{

    width:100%;

    height:58px;

    border:none;

    border-radius:12px;

    background:#3483FA;

    color:#FFF;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}



#btnVoltar:hover{

    background:#2968C8;

}




/*====================================================
            RESPONSIVIDADE
====================================================*/

@media (min-width:768px){

    .container{

        max-width:550px;

    }

}



@media (min-width:1280px){

    body{

        padding:60px;

    }

    .container{

        max-width:600px;

    }

}

/*====================================================
        LINK TABELA DE FRETES
====================================================*/

.linkFrete{

    display:inline-flex;
    align-items:center;
    gap:5px;

    margin-top:8px;

    font-size:13px;
    font-weight:500;

    color:#3483FA;

    text-decoration:none;

    transition:.2s;
}

.linkFrete:hover{

    color:#2968C8;
    text-decoration:underline;

}