/* =========================================================
   PÁGINAS INTERNAS
   TRADERS DE ELITE
========================================================= */


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

.page-hero {

    width: min(var(--container), 92vw);
    min-height: 88vh;
    margin: 0 auto;
    padding: 170px 0 110px;

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

    text-align: center;

    position: relative;
    overflow: hidden;

}


.page-hero-glow {

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .045);

    filter: blur(80px);

    top: 8%;
    left: 50%;

    transform: translateX(-50%);

    z-index: -1;

}


.page-hero-content {

    max-width: 850px;

}


.page-hero h1 {

    margin-top: 18px;

    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 7vw, 92px);

    line-height: .98;

    letter-spacing: -.045em;

}


.page-hero h1 em {

    color: var(--gold-light);

    font-style: normal;

}


.page-hero p {

    max-width: 680px;

    margin: 28px auto 0;

    color: var(--muted);

    font-size: 17px;

}


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

.page-section {

    width: min(var(--container), 92vw);

    margin: 0 auto;

    padding: 110px 0;

}


.dark-section {

    width: 100%;

    max-width: none;

    padding-left: 4vw;

    padding-right: 4vw;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.035),
            transparent 55%
        );

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

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

}


.page-section-grid {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 80px;

    align-items: start;

}


.page-heading h2 {

    margin-top: 15px;

    font-family: "Playfair Display", serif;

    font-size: clamp(40px, 5vw, 68px);

    line-height: 1.03;

    letter-spacing: -.035em;

}


.page-heading h2 em {

    color: var(--gold-light);

    font-style: normal;

}


/* =========================================================
   TEXTO
========================================================= */

.page-copy {

    color: var(--muted);

    font-size: 16px;

}


.page-copy p {

    margin-bottom: 22px;

}


.page-copy p:last-child {

    margin-bottom: 0;

}


.page-copy strong {

    color: var(--white);

}


/* =========================================================
   MISSÃO / VISÃO
========================================================= */

.mission-grid {

    width: min(var(--container), 92vw);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}


.mission-card {

    padding: 45px;

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

    border-radius: var(--radius);

    background: rgba(11,11,13,.72);

}


.mission-number {

    display: block;

    margin-bottom: 35px;

    color: var(--gold);

    font-size: 11px;

    letter-spacing: .14em;

}


.mission-card h2 {

    margin: 14px 0 18px;

    font-family: "Playfair Display", serif;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.05;

}


.mission-card h2 em {

    color: var(--gold-light);

    font-style: normal;

}


.mission-card p {

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   VALORES
========================================================= */

.values-page-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

}


.page-value-card {

    min-height: 225px;

    padding: 28px;

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

    border-radius: var(--radius);

    background: rgba(11,11,13,.78);

    transition:
        transform .3s var(--ease),
        border-color .3s var(--ease);

}


.page-value-card:hover {

    transform: translateY(-5px);

    border-color: var(--border);

}


.page-value-card > span {

    color: var(--gold);

    font-size: 11px;

    letter-spacing: .12em;

}


.page-value-card h3 {

    margin: 45px 0 10px;

    font-family: "Playfair Display", serif;

    font-size: 25px;

}


.page-value-card p {

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   PROPÓSITO
========================================================= */

.purpose-box {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 75px;

    padding: 65px;

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

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.055),
            rgba(255,255,255,.012)
        );

}


.purpose-box h2 {

    margin-top: 14px;

    font-family: "Playfair Display", serif;

    font-size: clamp(40px, 4vw, 58px);

    line-height: 1.02;

}


.purpose-box h2 em {

    color: var(--gold-light);

    font-style: normal;

}


/* =========================================================
   CARÁCTER SOCIAL
========================================================= */

.social-section {

    padding-top: 40px;

}


.social-box {

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 30px;

    align-items: start;

    padding: 45px;

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

    border-radius: 20px;

    background: #09090b;

}


.social-icon {

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 25px;

}


.social-box h2 {

    margin: 14px 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(36px, 4vw, 55px);

    line-height: 1;

}


.social-box h2 em {

    color: var(--gold-light);

    font-style: normal;

}


.social-box p {

    max-width: 750px;

    color: var(--muted);

}


/* =========================================================
   CTA
========================================================= */

.page-cta {

    padding: 85px 30px;

    text-align: center;

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

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.09),
            transparent 60%
        );

}


.page-cta h2 {

    margin: 14px auto 18px;

    max-width: 800px;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1;

}


.page-cta h2 em {

    color: var(--gold-light);

    font-style: normal;

}


.page-cta p {

    color: var(--muted);

    margin-bottom: 28px;

}


.page-cta-actions {

    display: flex;

    justify-content: center;

    gap: 12px;

}


/* =========================================================
   PÁGINA ATIVA
========================================================= */

.main-nav > a.active-page {

    color: var(--gold-light);

}


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

@media (max-width: 900px) {

    .page-section-grid,
    .mission-grid,
    .purpose-box {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .values-page-grid {

        grid-template-columns: 1fr 1fr;

    }


    .page-hero {

        min-height: 60vh;

    }

}


@media (max-width: 600px) {

    .page-hero {

        width: min(92vw, 560px);

        min-height: 58vh;

        padding-top: 120px;

    }


    .page-hero h1 {

        font-size: clamp(44px, 13vw, 65px);

    }


    .page-hero p {

        font-size: 14px;

    }


    .page-section {

        padding: 80px 0;

    }


    .values-page-grid {

        grid-template-columns: 1fr;

    }


    .mission-card,
    .purpose-box,
    .social-box {

        padding: 28px 22px;

    }


    .social-box {

        grid-template-columns: 1fr;

    }


    .page-cta {

        padding: 65px 22px;

    }


    .page-cta-actions {

        flex-direction: column;

    }


    .page-cta-actions .btn {

        width: 100%;

    }

}