/* ===================================================
   AXXIS TOPOGRAFIA
   PÁGINAS LEGAIS
=================================================== */


/* ===================================================
   SECTION
=================================================== */

.legal{

    padding:180px 0 120px;
    background:var(--black);
    min-height:100vh;
    scroll-margin-top:100px;

}


.legal .container{

    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 80px;

}

/* ===================================================
   HERO
=================================================== */

.legal-hero{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:50px;

    margin-bottom:50px;

}


.legal-content{

    flex:1;
    max-width:820px;

}


.legal-logo{

    flex:0 0 450px;

    display:flex;
    justify-content:flex-end;
    align-items:flex-start;

    margin-top:-50px;

}


.legal-logo img{

    width:420px;
    max-width:100%;
    height:auto;

    opacity:.98;

    transition:.40s ease;

}


.legal-logo img:hover{

    transform:translateY(-6px);

}

/* ===================================================
   SECTION TAG
=================================================== */

.legal .section-tag{

    display:inline-block;

    color:var(--gold);

    font-size:14px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;

    margin-bottom:18px;

}


.legal .section-tag::after{

    content:"";

    display:block;

    width:55px;
    height:2px;

    margin-top:14px;

    background:var(--gold);

}



/* ===================================================
   TITULOS
=================================================== */

.legal h1{

    font-size:clamp(62px,5vw,84px);

    line-height:.95;

    color:#FFF;

    font-weight:800;

    max-width:900px;

    margin-bottom:35px;

}


.legal h1 span{

    color:var(--gold);

}


.legal h2{

    font-size:34px;
    color:#FFF;

    margin-bottom:20px;

    font-weight:700;

}


.legal h2 span{

    color:var(--gold);

}



/* ===================================================
   TEXTOS
=================================================== */

.legal p{

    max-width:900px;

    color:rgba(255,255,255,.82);

    font-size:18px;
    line-height:1.9;

    margin-bottom:28px;

}


.legal p span{

    color:var(--gold);
    font-weight:600;

}


.legal strong{

    color:var(--gold);

}


.section-description{

    max-width:900px;

}


.legal-update{

    margin-bottom:45px;

}



/* ===================================================
   GRID
=================================================== */

.legal-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

    margin-top:40px;

}



/* ===================================================
   CARDS
=================================================== */

.legal-card{

    background:#101010;

    border:1px solid rgba(212,168,71,.15);

    border-radius:24px;

    padding:42px;

    transition:.35s ease;

    animation:fadeUp .7s ease;

}


.legal-card:hover{

    transform:translateY(-5px);

    border-color:var(--gold);

    box-shadow:
    0 15px 40px rgba(212,168,71,.15);

}


.legal-card h3{

    color:#FFF;

    font-size:28px;

    margin-bottom:22px;

    font-weight:700;

}


.legal-card h3 span{

    color:var(--gold);

}


.legal-card p{

    max-width:100%;

    margin-bottom:0;

}



/* ===================================================
   LISTAS
=================================================== */

.legal ul{

    margin-top:25px;

}


.legal li{

    color:rgba(255,255,255,.82);

    line-height:1.9;

    margin-bottom:14px;

    position:relative;

    padding-left:24px;

}


.legal li::before{

    content:"";

    position:absolute;

    left:0;
    top:14px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--gold);

}



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

.legal a{

    color:var(--gold);

    transition:.35s;

}


.legal a:hover{

    opacity:.85;

}



/* ===================================================
   BOTÃO WHATSAPP
=================================================== */

.legal-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

    margin:60px 0;

}

.legal-buttons .btn{

    width:320px;

    min-width:320px;

}


.legal-buttons .btn-primary{

    background:var(--gold);
    color:#000 !important;

    border:2px solid var(--gold);

    border-radius:50px;

    font-size:18px;
    font-weight:700;

    transition:.40s ease;

}


.legal-buttons .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 25px rgba(212,168,71,.35),
    0 0 50px rgba(212,168,71,.20);

}



/* ===================================================
   HOME TARGET
=================================================== */

.home-target{

    display:inline-block;

    color:var(--gold) !important;

    font-size:24px;

    font-weight:700;

    margin-left:5px;

    transition:.35s ease;

}


.home-target:hover{

    transform:scale(1.20);

    text-shadow:
    0 0 8px rgba(212,168,71,.80),
    0 0 18px rgba(212,168,71,.50);

}



/* ===================================================
   CONTATO
=================================================== */

.legal-card:last-child{

    margin-top:20px;

}


.legal-card:last-child a:hover{

    color:#FFF;

}



/* ===================================================
   DIVISOR
=================================================== */

.legal-divider{

    width:100%;
    height:1px;

    background:

    linear-gradient(

        90deg,
        transparent,
        rgba(212,168,71,.35),
        transparent

    );

    margin:80px 0;

}



/* ===================================================
   404
=================================================== */

.error-404{

    min-height:100vh;

    display:flex;

    align-items:center;
    justify-content:center;

    text-align:left;

}


.error-content{

    max-width:760px;

}


.error-content h1{

    font-size:clamp(90px,9vw,150px);

    color:var(--gold);

    line-height:.9;

    margin-bottom:35px;

}


.error-content h2{

    font-size:clamp(54px,5vw,74px);

    line-height:1;

    margin-bottom:28px;

}


.error-content p{

    max-width:700px;

    margin-bottom:45px;

}



/* ===================================================
   ANIMAÇÕES
=================================================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}



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

@media(max-width:992px){

    .legal{

        padding:150px 0 90px;

    }


    .legal .container{

        padding:0 35px;

    }


    .legal-hero{

        flex-direction:column;
        align-items:flex-start;

        gap:50px;

    }


    .legal-logo{

    width:100%;

    flex:none;

    justify-content:center;

    margin-top:0;

}


.legal-logo img{

    width:280px;

}


    .legal h1{

        font-size:54px;

    }


    .legal h2{

        font-size:30px;

    }


    .legal p{

        font-size:17px;

    }


    .legal-card{

        padding:35px;

    }

}


@media(max-width:768px){

    .legal{
        padding:140px 0 70px;
        overflow-x:hidden;
    }


    /* CONTAINER */

    .legal .container{
        width:100%;
        max-width:100%;
        padding-left:24px;
        padding-right:24px;
    }


    /* HERO */

    .legal-hero{
        display:flex;
        flex-direction:column;
        gap:45px;
        width:100%;
    }


    .legal-content{
        width:100%;
        max-width:100%;
        min-width:0;
    }


    .legal h1{
        font-size:44px;
        line-height:1.02;
        letter-spacing:-1.5px;

        width:100%;
        max-width:100%;

        overflow-wrap:normal;
        word-break:normal;
    }


    .legal h2{
        font-size:28px;
    }


    .legal p{
        font-size:16px;
        line-height:1.9;
    }


    /* LOGO */

    .legal-logo{
        width:100%;
        margin-top:0;

        display:flex;
        justify-content:center;
    }


    .legal-logo img{
        width:220px;
        max-width:70%;
        height:auto;
    }


    /* CARDS */

    .legal-grid{
        grid-template-columns:1fr;
        gap:28px;
    }


    .legal-card{
        width:100%;
        padding:28px;
    }


    .legal-card h3{
        font-size:25px;
        line-height:1.2;
    }


    .legal-card p,
    .legal-card li{
        font-size:16px;
        line-height:1.9;
    }


    /* BOTÕES */

    .legal-buttons{
        flex-direction:column;
        align-items:center;

        gap:24px;

        margin-top:45px;
        margin-bottom:45px;
    }


    .legal-buttons .btn{
        width:100%;
        max-width:380px;
        min-width:auto;

        margin:0;

        text-align:center;
    }


    /* DIVISORES */

    .legal-divider{
        margin:45px 0;
    }


    /* ERRO 404 */

    .error-content h2{
        font-size:42px;
    }

}

/* ===================================================
   MOBILE PEQUENO
=================================================== */

@media(max-width:420px){

    .legal{
        padding:120px 0 60px;
    }

    .legal .container{
        padding-left:24px;
        padding-right:24px;
    }

    .legal-content{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .legal h1{
        font-size:36px;
        line-height:1.08;
        letter-spacing:-1px;

        width:100%;
        max-width:100%;

        overflow-wrap:normal;
        word-break:normal;
        hyphens:none;
    }

    .legal h1 span{
        display:block;
    }

}

/* =========================================
   VOLTAR AO SITE
========================================= */

.legal-back{

    margin-top:80px;

}


.legal-back a{

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

    padding:18px 32px;

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

    border-radius:50px;

    color:var(--gold);

    font-weight:600;

    transition:.35s ease;

}


.legal-back a:hover{

    background:var(--gold);

    color:#000;

    transform:translateY(-3px);

}