/* =========================================================
   CODELAB
   LEGAL PAGES
   Política de Privacidade + Termos de Uso
========================================================= */


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #f7f9fa;

    color: #062b3d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}


/* =========================================================
   HEADER
========================================================= */

.legal-header {
    width: 100%;

    padding:
        32px
        clamp(24px, 6vw, 90px);

    border-bottom:
        1px solid #dfe7ea;

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

    background: #ffffff;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    color: #062b3d;

    font-size: 28px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -1.8px;

    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

.brand span {
    color: #079bae;
}

.brand-sub {
    margin-top: 7px;

    color: #7b8b93;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;
}


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

.legal-container {
    width: min(
        900px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    padding:
        80px
        0
        110px;
}


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

.legal-eyebrow {
    margin-bottom: 20px;

    color: #079bae;

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

    letter-spacing: 3px;

    text-transform: uppercase;
}

.legal-container > h1 {
    max-width: 760px;

    margin: 0;

    color: #062b3d;

    font-size:
        clamp(
            44px,
            7vw,
            72px
        );

    font-weight: 600;

    line-height: .98;

    letter-spacing: -4px;
}

.legal-intro {
    max-width: 720px;

    margin:
        30px
        0
        0;

    color: #647781;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.8;
}

.legal-date {
    margin-top: 25px;

    color: #91a0a7;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.legal-divider {
    width: 65px;
    height: 3px;

    margin:
        50px
        0
        15px;

    background: #079bae;
}


/* =========================================================
   LEGAL SECTIONS
========================================================= */

.legal-section {
    padding:
        36px
        0;

    border-bottom:
        1px solid #dfe7ea;
}

.legal-section h2 {
    margin:
        0
        0
        18px;

    color: #062b3d;

    font-size: 24px;
    font-weight: 600;

    line-height: 1.25;

    letter-spacing: -1px;
}

.legal-section p {
    max-width: 820px;

    margin:
        0
        0
        16px;

    color: #586d77;

    font-size: 15px;

    line-height: 1.85;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section strong {
    color: #062b3d;

    font-weight: 700;
}


/* =========================================================
   LISTS
========================================================= */

.legal-section ul {
    margin:
        20px
        0
        5px;

    padding-left: 23px;
}

.legal-section li {
    margin-bottom: 10px;

    padding-left: 5px;

    color: #586d77;

    font-size: 15px;

    line-height: 1.75;
}

.legal-section li::marker {
    color: #079bae;
}


/* =========================================================
   LINKS INSIDE CONTENT
========================================================= */

.legal-section a {
    color: #079bae;

    font-weight: 600;

    text-decoration: underline;

    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

    transition:
        opacity .2s ease;
}

.legal-section a:hover {
    opacity: .7;
}


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

.legal-contact {
    margin-top: 55px;

    padding:
        38px
        40px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #062b3d 0%,
            #073e50 100%
        );

    color: #ffffff;

    box-shadow:
        0 20px 50px
        rgba(6, 43, 61, .12);
}

.legal-contact > span {
    display: block;

    color: #08a6ba;

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

    letter-spacing: 3px;

    text-transform: uppercase;
}

.legal-contact h2 {
    margin:
        13px
        0
        13px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 600;

    letter-spacing: -1.3px;
}

.legal-contact p {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.75;
}

.legal-contact strong {
    color: #ffffff;
}


/* =========================================================
   FOOTER
========================================================= */

.legal-footer {
    width: 100%;

    padding:
        30px
        clamp(20px, 5vw, 60px);

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

    gap: 20px;

    flex-wrap: wrap;

    background: #062b3d;

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

    text-align: center;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.legal-footer a {
    color: #ffffff;

    text-decoration: none;

    transition:
        color .2s ease,
        opacity .2s ease;

    opacity: .75;
}

.legal-footer a:hover {
    color: #08a6ba;

    opacity: 1;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background: #079bae;

    color: #ffffff;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible {
    outline:
        2px solid
        #079bae;

    outline-offset: 4px;

    border-radius: 2px;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 900px
) {

    .legal-header {
        padding:
            28px
            30px;
    }

    .legal-container {
        padding:
            65px
            0
            90px;
    }

    .legal-container > h1 {
        letter-spacing:
            -3px;
    }

}


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

@media (
    max-width: 600px
) {

    .legal-header {
        padding:
            25px
            20px;
    }

    .brand {
        font-size: 25px;
    }

    .brand-sub {
        font-size: 7px;

        letter-spacing: 2.3px;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTAINER
    |--------------------------------------------------------------------------
    */

    .legal-container {
        width:
            calc(
                100% - 36px
            );

        padding:
            50px
            0
            70px;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO
    |--------------------------------------------------------------------------
    */

    .legal-eyebrow {
        margin-bottom: 16px;
    }

    .legal-container > h1 {
        font-size:
            clamp(
                40px,
                13vw,
                54px
            );

        line-height: 1;

        letter-spacing: -2.5px;
    }

    .legal-intro {
        margin-top: 23px;

        font-size: 15px;

        line-height: 1.7;
    }

    .legal-date {
        margin-top: 20px;

        font-size: 8px;

        line-height: 1.6;
    }

    .legal-divider {
        margin:
            38px
            0
            5px;
    }


    /*
    |--------------------------------------------------------------------------
    | SECTIONS
    |--------------------------------------------------------------------------
    */

    .legal-section {
        padding:
            30px
            0;
    }

    .legal-section h2 {
        font-size: 21px;
    }

    .legal-section p,
    .legal-section li {
        font-size: 14px;

        line-height: 1.75;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTACT
    |--------------------------------------------------------------------------
    */

    .legal-contact {
        margin-top: 40px;

        padding:
            28px
            24px;

        border-radius: 11px;
    }

    .legal-contact h2 {
        font-size: 26px;
    }


    /*
    |--------------------------------------------------------------------------
    | FOOTER
    |--------------------------------------------------------------------------
    */

    .legal-footer {
        padding:
            28px
            20px;

        flex-direction: column;

        gap: 12px;

        font-size: 8px;
    }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (
    max-width: 380px
) {

    .legal-container {
        width:
            calc(
                100% - 28px
            );
    }

    .legal-container > h1 {
        font-size: 38px;

        letter-spacing: -2px;
    }

    .legal-contact {
        padding:
            24px
            20px;
    }

}