/* ==========================================================
   CONTOS DA JHOY
   PÁGINAS LEGAIS
========================================================== */

:root {

    --legal-rosa: #F8759A;
    --legal-rosa-escuro: #D94C79;
    --legal-texto: #2D2D2D;
    --legal-texto-claro: #6D6D6D;
    --legal-fundo: #FFFDFC;
    --legal-card: #FFFFFF;
    --legal-borda: #EFE8EB;
    --legal-sombra: 0 18px 45px rgba(0,0,0,.06);

}


/* ==========================================================
BODY
========================================================== */

body{

    margin:0;
    padding:0;

    background:
    radial-gradient(circle at top,#FFEAF1 0%,transparent 30%),
    var(--legal-fundo);

    font-family:
    "Poppins",
    sans-serif;

    color:var(--legal-texto);

}


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

.legal-container{

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

    margin:auto;

    padding:70px 0;

}


/* ==========================================================
LOGO
========================================================== */

.legal-logo{

    display:flex;

    justify-content:center;

    margin-bottom:40px;

}

.legal-logo img{

    width:220px;

}


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

.legal-card{

    background:var(--legal-card);

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

    border-radius:26px;

    padding:60px;

    box-shadow:var(--legal-sombra);

}


/* ==========================================================
TÍTULO
========================================================== */

.legal-topo{

    text-align:center;

    margin-bottom:55px;

}

.legal-topo span{

    display:inline-block;

    color:var(--legal-rosa-escuro);

    font-size:12px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:14px;

}

.legal-topo h1{

    margin:0;

    font-size:42px;

    font-weight:700;

    color:#2D2430;

}

.legal-topo p{

    margin-top:18px;

    color:var(--legal-texto-claro);

    font-size:16px;

    line-height:1.8;

}

.legal-data{

    margin-top:20px;

    color:#999;

    font-size:13px;

}


/* ==========================================================
SEÇÕES
========================================================== */

.legal-section{

    margin-bottom:45px;

}

.legal-section:last-child{

    margin-bottom:0;

}

.legal-section h2{

    color:var(--legal-rosa-escuro);

    font-size:24px;

    margin-bottom:18px;

}

.legal-section p{

    color:var(--legal-texto-claro);

    font-size:16px;

    line-height:1.95;

    margin-bottom:18px;

}

.legal-section ul{

    padding-left:22px;

}

.legal-section li{

    margin-bottom:12px;

    color:var(--legal-texto-claro);

    line-height:1.8;

}


/* ==========================================================
CAIXAS
========================================================== */

.legal-box{

    background:#FFF8FA;

    border-left:4px solid var(--legal-rosa);

    padding:24px;

    border-radius:14px;

    margin:30px 0;

}

.legal-box strong{

    color:#D94C79;

}


/* ==========================================================
LINKS
========================================================== */

.legal-card a{

    color:var(--legal-rosa-escuro);

    text-decoration:none;

    font-weight:600;

}

.legal-card a:hover{

    text-decoration:underline;

}


/* ==========================================================
BOTÃO VOLTAR
========================================================== */

.legal-voltar{

    display:flex;

    justify-content:center;

    margin-top:50px;

}

.legal-voltar a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:240px;

    height:56px;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    color:white;

    background:

    linear-gradient(
    135deg,
    #F8759A,
    #D94C79);

    transition:.25s;

}

.legal-voltar a:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 35px rgba(248,117,154,.30);

}


/* ==========================================================
RODAPÉ
========================================================== */

.legal-footer{

    text-align:center;

    margin-top:45px;

    color:#999;

    font-size:13px;

}


/* ==========================================================
RESPONSIVO
========================================================== */

@media(max-width:900px){

.legal-card{

padding:40px;

}

.legal-topo h1{

font-size:34px;

}

}

@media(max-width:650px){

.legal-container{

width:min(100% - 25px,1000px);

}

.legal-card{

padding:28px;

border-radius:18px;

}

.legal-topo{

margin-bottom:40px;

}

.legal-topo h1{

font-size:28px;

}

.legal-section h2{

font-size:22px;

}

.legal-section p{

font-size:15px;

}

.legal-logo img{

width:180px;

}

}