/* Layout.css*/
/* ============================================================
   PX360_ATENDE
   GLOBAL DESIGN SYSTEM
   ============================================================ */


/* ============================================================
   ROOT / CORES
   ============================================================ */

:root {

    /* --------------------------------------------------------
       AZUIS — CONFIANÇA E SOLIDEZ
    -------------------------------------------------------- */

    --px-blue-deep: #0D2A5A;
    --px-blue: #185FA5;
    --px-blue-communication: #378ADD;
    --px-blue-soft: #B5D4F4;


    /* --------------------------------------------------------
       VERDES — HUMANIZAÇÃO E CUIDADO
    -------------------------------------------------------- */

    --px-green-dark: #0F6E56;
    --px-green: #1D9E75;
    --px-green-medium: #5DCAA5;
    --px-green-light: #9FE1CB;
    --px-green-tint: #E1F5EE;


    /* --------------------------------------------------------
       NEUTROS
    -------------------------------------------------------- */

    --px-dark: #0E1A2B;
    --px-text: #333333;
    --px-gray: #888888;
    --px-background: #F5F8FC;
    --px-white: #FFFFFF;


    /* --------------------------------------------------------
       BORDAS / SOMBRAS
    -------------------------------------------------------- */

    --px-border: #E3EAF2;

    --px-shadow-sm:
        0 2px 8px rgba(13, 42, 90, 0.06);

    --px-shadow:
        0 8px 30px rgba(13, 42, 90, 0.09);

    --px-shadow-lg:
        0 18px 50px rgba(13, 42, 90, 0.13);


    /* --------------------------------------------------------
       DIMENSÕES
    -------------------------------------------------------- */

    --px-header-height: 76px;

    --px-container:
        1240px;

    --px-radius-sm:
        8px;

    --px-radius:
        12px;

    --px-radius-lg:
        20px;

    --px-radius-xl:
        28px;


    /* --------------------------------------------------------
       TRANSIÇÕES
    -------------------------------------------------------- */

    --px-transition:
        0.22s ease;

}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    padding: 0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 16px;

    line-height: 1.6;

    color:
        var(--px-text);

    background:
        var(--px-background);

    -webkit-font-smoothing:
        antialiased;

}


img {

    max-width: 100%;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea,
select {

    font-family:
        inherit;

}


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

.px-header-container,
.px-footer-container,
.px-footer-bottom-container {

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

    margin:
        0 auto;

}


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

.px-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    background:
        rgba(255, 255, 255, 0.96);

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

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.px-header-container {

    min-height:
        var(--px-header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


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

.px-logo-link {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

}


.px-logo {

    width:
        auto;

    height:
        120px;

    object-fit:
        contain;

}


/* ============================================================
   NAVEGAÇÃO
   ============================================================ */

.px-main-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        34px;

    flex: 1;

}


.px-nav-link {

    position:
        relative;

    padding:
        8px 0;

    color:
        var(--px-dark);

    font-size:
        15px;

    font-weight:
        500;

    transition:
        color var(--px-transition);

}


.px-nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    border-radius:
        2px;

    background:
        var(--px-green);

    transition:
        width var(--px-transition);

}


.px-nav-link:hover {

    color:
        var(--px-blue);

}


.px-nav-link:hover::after {

    width:
        100%;

}


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

.px-header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.px-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0 20px;

    border-radius:
        10px;

    font-size:
        14px;

    font-weight:
        700;

    border:
        1px solid transparent;

    cursor:
        pointer;

    transition:
        transform var(--px-transition),
        box-shadow var(--px-transition),
        background var(--px-transition),
        border-color var(--px-transition);

}


.px-btn:hover {

    transform:
        translateY(-1px);

}


.px-btn-primary {

    color:
        var(--px-white);

    background:
        var(--px-green);

    box-shadow:
        0 5px 16px rgba(29, 158, 117, 0.20);

}


.px-btn-primary:hover {

    background:
        var(--px-green-dark);

    box-shadow:
        0 8px 20px rgba(29, 158, 117, 0.25);

}


.px-btn-login {

    color:
        var(--px-blue-deep);

    background:
        transparent;

}


.px-btn-login:hover {

    background:
        var(--px-green-tint);

}


.px-btn-header {

    min-width:
        128px;

}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.px-mobile-menu-button {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    padding:
        0;

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

    border-radius:
        10px;

    background:
        var(--px-white);

    color:
        var(--px-blue-deep);

    cursor:
        pointer;

}


.px-mobile-menu-button svg {

    width:
        21px;

    height:
        21px;

}


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

.px-mobile-menu {

    display:
        none;

    padding:
        12px 20px 24px;

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

    background:
        var(--px-white);

}


.px-mobile-menu.is-open {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


.px-mobile-link {

    display:
        block;

    padding:
        12px 10px;

    border-radius:
        8px;

    color:
        var(--px-dark);

    font-weight:
        500;

}


.px-mobile-link:hover {

    background:
        var(--px-green-tint);

    color:
        var(--px-green-dark);

}


.px-mobile-divider {

    height:
        1px;

    margin:
        8px 0;

    background:
        var(--px-border);

}


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

.px-main {

    min-height:
        calc(
            100vh - var(--px-header-height)
        );

}


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

.px-footer {

    margin-top:
        80px;

    color:
        var(--px-white);

    background:
        var(--px-blue-deep);

}


.px-footer-container {

    display:
        grid;

    grid-template-columns:
        1.7fr
        1fr
        1fr
        1fr;

    gap:
        60px;

    padding:
        70px 0 60px;

}


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

.px-footer-company {

    max-width:
        360px;

}


.px-footer-logo-link {

    display:
        inline-flex;

    margin-bottom:
        20px;

    padding:
        10px;

    border-radius:
        12px;

    background:
        var(--px-white);

}


.px-footer-logo {

    height:
        42px;

    width:
        auto;

}


.px-footer-description {

    margin:
        0;

    color:
        rgba(255,255,255,0.72);

    font-size:
        14px;

    line-height:
        1.75;

}


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

.px-footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        9px;

}


.px-footer-title {

    margin:
        0 0 10px;

    color:
        var(--px-white);

    font-size:
        15px;

    font-weight:
        700;

}


.px-footer-column a {

    color:
        rgba(255,255,255,0.70);

    font-size:
        14px;

    transition:
        color var(--px-transition);

}


.px-footer-column a:hover {

    color:
        var(--px-green-light);

}


/* ============================================================
   SOCIAL
   ============================================================ */

.px-footer-social {

    display:
        flex;

    gap:
        9px;

    margin-top:
        14px;

}


.px-social-link {

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid rgba(255,255,255,0.15);

    border-radius:
        10px;

    color:
        var(--px-white) !important;

    background:
        rgba(255,255,255,0.05);

}


.px-social-link:hover {

    background:
        var(--px-green);

    border-color:
        var(--px-green);

}


.px-social-link svg {

    width:
        17px;

    height:
        17px;

}


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

.px-footer-bottom {

    border-top:
        1px solid rgba(255,255,255,0.10);

}


.px-footer-bottom-container {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        rgba(255,255,255,0.55);

    font-size:
        13px;

}


.px-footer-legal {

    display:
        flex;

    gap:
        24px;

}


.px-footer-legal a:hover {

    color:
        var(--px-white);

}


/* ============================================================
   RESPONSIVIDADE — TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .px-main-nav {

        gap:
            18px;

    }


    .px-header-actions {

        gap:
            5px;

    }


    .px-footer-container {

        grid-template-columns:
            1.5fr
            1fr
            1fr;

    }

}


/* ============================================================
   RESPONSIVIDADE — MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .px-header-container {

        min-height:
            68px;

    }


    .px-logo {

        height:
            40px;

    }


    .px-main-nav,
    .px-header-actions {

        display:
            none;

    }


    .px-mobile-menu-button {

        display:
            flex;

    }


    .px-footer {

        margin-top:
            50px;

    }


    .px-footer-container {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px 25px;

        padding:
            50px 0 40px;

    }


    .px-footer-company {

        grid-column:
            1 / -1;

        max-width:
            none;

    }


    .px-footer-bottom-container {

        flex-direction:
            column;

        justify-content:
            center;

        padding:
            20px 0;

        text-align:
            center;

    }


    .px-footer-legal {

        flex-wrap:
            wrap;

        justify-content:
            center;

    }

}


/* ============================================================
   RESPONSIVIDADE — CELULARES PEQUENOS
   ============================================================ */

@media (max-width: 480px) {

    .px-header-container,
    .px-footer-container,
    .px-footer-bottom-container {

        width:
            min(
                calc(100% - 28px),
                var(--px-container)
            );

    }


    .px-footer-container {

        grid-template-columns:
            1fr;

    }


    .px-footer-company {

        grid-column:
            auto;

    }

}