/* ==========================================================================
   HOMEPAGE COMPONENTS
   ========================================================================== */



/* ==========================================================================
   EDITORIAL FLOW
   ========================================================================== */

.editorial-flow {

    display: flex;

    flex-direction: column;

}

.editorial-flow>* {

    margin: 0;

}

.editorial-flow>*+* {

    margin-top: 1.4rem;

}



/* ==========================================================================
   BUTTON GROUP
   ========================================================================== */

.button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--homepage-space-sm);
    margin-top: var(--homepage-space-sm);
}



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

.card {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    height: 100%;

    padding: var(--homepage-space-xl);

    border-radius: var(--homepage-radius-lg);

    background: #fff;

    border: 1px solid rgba(0, 0, 0, .06);

    box-shadow: var(--homepage-shadow-soft);

    transition:
        transform var(--homepage-transition-normal),
        box-shadow var(--homepage-transition-normal),
        border-color var(--homepage-transition-normal);

}

.card>*+* {
    margin-block-start: var(--homepage-space-md);
}


/* ==========================================================================
   CARD HOVER
   ========================================================================== */

@media (hover:hover) {

    .card:hover {

        transform: translateY(-3px);

        box-shadow: var(--homepage-shadow-card);

    }

}



/* ==========================================================================
   STRATEGIC STATEMENT
   ========================================================================== */

.strategic-statement {

    position: relative;

    padding-left: var(--homepage-space-lg);

}

.strategic-statement::before {

    content: "";

    position: absolute;

    inset-block: 0;

    left: 0;

    width: 4px;

    border-radius: 999px;

    background: var(--color-primary);

}



/* ==========================================================================
   EDITORIAL NAVIGATION
   ========================================================================== */

.navigation a {

    display: inline-flex;

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

    align-items: center;

    text-decoration: none;

    transition:

        color var(--homepage-transition-fast),

        opacity var(--homepage-transition-fast);

}

.navigation a:hover {

    opacity: .75;

}



/* ==========================================================================
   FIGURE
   ========================================================================== */

.figure {

    overflow: hidden;

}

.figure img {

    display: block;

}



/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width:768px) {

    .button-group {

        gap: var(--homepage-space-md);

    }

}


/* ==========================================================================
   HOMEPAGE BUTTONS
   ========================================================================== */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

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

    font-weight: 600;

    border-radius: 999px;

    padding: 1rem 1.75rem;

    transition: all var(--homepage-transition-fast);

}

.button-primary {

    background: var(--brand-yellow);

    color: var(--brand-blue);

}

.button-primary:hover {

    transform: translateY(-2px);

}

.button-secondary {

    border: 2px solid var(--brand-blue);

    color: var(--brand-blue);

    background: white;

}

.button-secondary:hover {

    background: rgba(50,58,204,.04);

    transform: translateY(-2px);

}



/* ==========================================================================
   HERO ACTIONS
   Mantém os dois CTAs na mesma linha em tablet e desktop
   ========================================================================== */

@media (min-width: 768px) {

    .button-group.hero-actions {

        flex-wrap: nowrap;

        justify-content: flex-start;

        gap: .75rem;

    }

    .button-group.hero-actions .button {

        flex: 0 0 auto;

        padding: .9rem 1.1rem;

        font-size: .95rem;

        line-height: 1.2;

        white-space: nowrap;

    }

}