.client-stories {
}

    .client-stories .client-stories__inner {
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacer-arrow);
    }


    /* ============================================================
   QUOTE
   ============================================================ */

    .client-stories .cs-quote {
        margin: 0;
        width: 100%;
        max-width: 960px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .client-stories .cs-quote__body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .client-stories .cs-quote__mark {
        display: block;
        width: 72px;
        height: 48px;
    }

    .client-stories .cs-quote__mark-svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .client-stories .cs-quote__mark--close {
        align-self: flex-end;
        transform: rotate(180deg);
    }

    .client-stories .cs-quote__text {
        margin: 0;
        width: 100%;
        font-family: var(--font-tpSans-exLight);
        font-weight: var(--fw-extralight);
        color: var(--body-default);
    }

    .client-stories .cs-quote__author {
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .client-stories .cs-quote__name {
        font-family: var(--font-tpSans-medium);
        font-weight: var(--fw-medium);
        color: var(--title-default);
    }

    .client-stories .cs-quote__role {
        margin-top: 3px;
        font-family: var(--font-tpSans-light);
        font-weight: var(--fw-light);
        color: black;
    }


    /* ============================================================
   NAV
   Usa o mesmo padrão visual do carouseltpc.
   ============================================================ */

    .client-stories .cs-nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

        .client-stories .cs-nav[hidden] {
            display: none;
        }


    /*
 * O comportamento visual vem do .tpc__arrow do
 * carouseltpc.css.
 */
    .client-stories .cs-nav__btn {
        position: relative;
        flex: none;
        width: 56px;
        height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        background: var(--bg-default);
        color: var(--title-primary-strong);
        overflow: hidden;
        isolation: isolate;
        transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
    }


        /*
 * Mesmo comportamento das setas do carouseltpc.
 */
        .client-stories .cs-nav__btn .tpc__arrow-accent {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: var(--bg-primary-strong);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform var(--t-base) var(--ease);
        }

        .client-stories .cs-nav__btn .tpc__arrow-icon {
            position: relative;
            z-index: 2;
            width: 24px;
            height: 24px;
        }

            .client-stories .cs-nav__btn .tpc__arrow-icon svg {
                position: absolute;
                left: 4px;
                top: 4px;
                width: 16.7151px;
                height: 16px;
                display: block;
            }

    .client-stories .cs-nav__btn--prev .tpc__arrow-icon {
        transform: rotate(180deg);
    }

    .client-stories .cs-nav__btn:hover .tpc__arrow-accent,
    .client-stories .cs-nav__btn:focus-visible .tpc__arrow-accent,
    .client-stories .cs-nav__btn.is-pressed .tpc__arrow-accent {
        transform: scaleX(1);
    }

    .client-stories .cs-nav__btn:hover,
    .client-stories .cs-nav__btn:focus-visible,
    .client-stories .cs-nav__btn.is-pressed {
        color: var(--title-inverse);
    }


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

@media (max-width: 767px) {

   /* .client-stories .client-stories__inner {
        padding-inline: 20px;
    }*/

    .client-stories .cs-quote__mark {
        width: 48px;
        height: 32px;
    }
}