/* ============================================================
   TENIS ARENA — TARIFE
   ============================================================ */

.ta-prices-page {
    width:
        100%;

    overflow:
        hidden;

    background:
        var(--ta-ivory-soft);

    color:
        var(--ta-ink);
}


.ta-prices-page,
.ta-prices-page *,
.ta-prices-page button {
    box-sizing:
        border-box;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif !important;
}


.ta-prices-container {
    width:
        min(
            calc(100% - 96px),
            1280px
        );

    margin-inline:
        auto;
}



/* ============================================================
   EYEBROW
   ============================================================ */

.ta-prices-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    font-size:
        .62rem;

    line-height:
        1;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    font-weight:
        600;

    color:
        var(--ta-gold);
}


.ta-prices-eyebrow::before {
    content:
        "";

    width:
        34px;

    height:
        1px;

    flex:
        0
        0
        34px;

    background:
        currentColor;
}


.ta-prices-eyebrow.is-clay {
    color:
        var(--ta-clay);
}



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

.ta-prices-hero {
    position:
        relative;

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    color:
        var(--ta-ivory);

    background:
        var(--ta-forest-deep);

    background-image:
        var(--ta-prices-hero);

    background-size:
        cover;

    background-position:
        center 55%;
}


.ta-prices-hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                4,
                43,
                33,
                .96
            )
            0%,

            rgba(
                4,
                43,
                33,
                .78
            )
            38%,

            rgba(
                4,
                43,
                33,
                .28
            )
            72%,

            rgba(
                4,
                43,
                33,
                .20
            )
            100%
        );
}


.ta-prices-hero-inner {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        300px;

    align-items:
        center;

    gap:
        80px;
}


.ta-prices-hero-copy {
    max-width:
        660px;
}


.ta-prices-hero h1 {
    margin:
        21px
        0
        0;

    font-size:
        clamp(
            3.5rem,
            4.6vw,
            5.25rem
        );

    line-height:
        .88;

    letter-spacing:
        -.045em;

    font-weight:
        500;

    color:
        var(--ta-ivory);
}


.ta-prices-hero-copy > p {
    max-width:
        530px;

    margin:
        21px
        0
        0;

    font-size:
        .98rem;

    line-height:
        1.48;

    color:
        rgba(
            246,
            240,
            228,
            .78
        );
}


.ta-prices-hero-action {
    min-width:
        185px;

    min-height:
        47px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        27px;

    padding:
        0
        19px;

    background:
        var(--ta-gold);

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

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .09em;

    font-size:
        .64rem;

    font-weight:
        700;

    color:
        var(--ta-forest-deep);

    transition:
        background-color
        280ms
        ease,
        color
        280ms
        ease;
}


.ta-prices-hero-action:hover {
    background:
        transparent;

    color:
        var(--ta-gold);
}


.ta-prices-hero-action strong {
    font-size:
        1rem;

    font-weight:
        400;
}


.ta-prices-hero-quote {
    justify-self:
        end;

    align-self:
        center;

    display:
        grid;

    gap:
        4px;

    padding-left:
        23px;

    border-left:
        1px solid
        rgba(
            199,
            165,
            82,
            .64
        );

    text-transform:
        uppercase;

    letter-spacing:
        .17em;

    font-size:
        .83rem;

    line-height:
        1.3;

    color:
        rgba(
            246,
            240,
            228,
            .82
        );
}


.ta-prices-hero-quote strong {
    font-weight:
        500;

    color:
        var(--ta-ivory);
}



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

.ta-prices-main {
    padding:
        57px
        0
        52px;
}


.ta-prices-heading {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        end;

    gap:
        60px;

    margin-bottom:
        27px;
}


.ta-prices-heading h2,
.ta-prices-faq-heading h2 {
    margin:
        13px
        0
        0;

    font-size:
        clamp(
            2.75rem,
            3.4vw,
            4rem
        );

    line-height:
        .91;

    letter-spacing:
        -.04em;

    font-weight:
        500;

    color:
        var(--ta-forest);
}


.ta-prices-heading p {
    margin:
        10px
        0
        0;

    font-size:
        .87rem;

    line-height:
        1.47;

    color:
        var(--ta-muted);
}



/* ============================================================
   TABS
   ============================================================ */

.ta-prices-tabs {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                170px,
                1fr
            )
        );

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


.ta-prices-tabs button {
    min-height:
        65px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        2px;

    padding:
        9px
        19px;

    border:
        0;

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

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--ta-muted);

    cursor:
        pointer;

    transition:
        background-color
        280ms
        ease,
        color
        280ms
        ease;
}


.ta-prices-tabs button:last-child {
    border-right:
        0;
}


.ta-prices-tabs button strong {
    font-size:
        .84rem;

    font-weight:
        600;
}


.ta-prices-tabs button span {
    font-size:
        .68rem;
}


.ta-prices-tabs button.is-active {
    background:
        var(--ta-forest);

    color:
        var(--ta-ivory);
}



/* ============================================================
   PANELS
   ============================================================ */

.ta-prices-panel[hidden] {
    display:
        none !important;
}


.ta-prices-courts {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;
}



/* ============================================================
   PRICE CARDS
   ============================================================ */

.ta-price-card {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        29px;

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

    background:
        var(--ta-ivory);

    color:
        var(--ta-forest);
}


.ta-price-card.is-featured {
    background:
        var(--ta-forest-deep);

    border-color:
        var(--ta-forest-deep);

    color:
        var(--ta-ivory);
}


.ta-price-card-heading {
    padding-bottom:
        20px;

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


.ta-price-card.is-featured
.ta-price-card-heading {
    border-color:
        rgba(
            246,
            240,
            228,
            .35
        );
}


.ta-price-card-heading > span {
    display:
        block;

    margin-bottom:
        8px;

    font-size:
        .57rem;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        var(--ta-clay);
}


.ta-price-card.is-featured
.ta-price-card-heading > span {
    color:
        var(--ta-gold);
}


.ta-price-card h3 {
    margin:
        0;

    font-size:
        clamp(
            2.25rem,
            2.65vw,
            3rem
        );

    line-height:
        .92;

    letter-spacing:
        -.035em;

    font-weight:
        500;

    color:
        inherit;
}


.ta-price-card-heading p {
    margin:
        7px
        0
        0;

    font-size:
        .83rem;

    color:
        var(--ta-muted);
}


.ta-price-card.is-featured
.ta-price-card-heading p {
    color:
        rgba(
            246,
            240,
            228,
            .66
        );
}


.ta-price-card-rules {
    flex:
        1
        1
        auto;
}


.ta-price-rule {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        25px;

    min-height:
        108px;

    padding:
        18px
        0;

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


.ta-price-card.is-featured
.ta-price-rule {
    border-color:
        rgba(
            246,
            240,
            228,
            .23
        );
}


.ta-price-rule-meta {
    display:
        grid;

    gap:
        5px;
}


.ta-price-rule-meta span {
    font-size:
        .60rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    color:
        var(--ta-clay);
}


.ta-price-card.is-featured
.ta-price-rule-meta span {
    color:
        var(--ta-gold);
}


.ta-price-rule-meta strong {
    font-size:
        .91rem;

    font-weight:
        600;

    color:
        inherit;
}


.ta-price-rule-value {
    text-align:
        right;
}


.ta-price-rule-value > strong {
    display:
        block;

    font-size:
        2rem;

    line-height:
        .95;

    letter-spacing:
        -.03em;

    font-weight:
        500;
}


.ta-price-rule-value > strong.is-text {
    max-width:
        130px;

    font-size:
        1.15rem;

    line-height:
        1.05;
}


.ta-price-rule-value span {
    display:
        block;

    margin-top:
        4px;

    font-size:
        .68rem;

    color:
        var(--ta-muted);
}


.ta-price-card.is-featured
.ta-price-rule-value span {
    color:
        rgba(
            246,
            240,
            228,
            .62
        );
}


.ta-price-rule-empty {
    min-height:
        160px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        26px
        0;
}


.ta-price-rule-empty strong {
    font-size:
        1.15rem;

    font-weight:
        500;
}


.ta-price-rule-empty p {
    max-width:
        360px;

    margin:
        6px
        0
        0;

    font-size:
        .78rem;

    line-height:
        1.4;

    color:
        var(--ta-muted);
}


.ta-price-card-action {
    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        21px;

    padding:
        0
        16px;

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

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .075em;

    font-size:
        .61rem;

    font-weight:
        700;

    color:
        var(--ta-forest);
}


.ta-price-card.is-featured
.ta-price-card-action {
    border-color:
        var(--ta-gold);

    background:
        var(--ta-gold);

    color:
        var(--ta-forest-deep);
}


.ta-price-card-action strong {
    font-size:
        .95rem;

    font-weight:
        400;
}



/* ============================================================
   SPECIAL PRICING
   ============================================================ */

.ta-prices-special {
    display:
        grid;

    grid-template-columns:
        minmax(
            260px,
            .65fr
        )
        minmax(
            0,
            1.35fr
        );

    gap:
        50px;

    margin-top:
        21px;

    padding:
        22px
        0;

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

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


.ta-prices-special span {
    display:
        block;

    font-size:
        .59rem;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    color:
        var(--ta-clay);
}


.ta-prices-special strong {
    display:
        block;

    margin-top:
        5px;

    font-size:
        1.22rem;

    font-weight:
        500;

    color:
        var(--ta-forest);
}


.ta-prices-special p {
    max-width:
        620px;

    margin:
        0;

    font-size:
        .78rem;

    line-height:
        1.5;

    color:
        var(--ta-muted);
}



/* ============================================================
   BENEFITS
   ============================================================ */

.ta-prices-benefits {
    border-top:
        1px solid
        var(--ta-border);

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

    background:
        var(--ta-ivory);
}


.ta-prices-benefits-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );
}


.ta-prices-benefits article {
    min-height:
        150px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    padding:
        21px;

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

    text-align:
        center;
}


.ta-prices-benefits article:last-child {
    border-right:
        0;
}


.ta-prices-benefits article > span {
    margin-bottom:
        9px;

    font-size:
        1.25rem;

    color:
        var(--ta-gold);
}


.ta-prices-benefits strong {
    font-size:
        1rem;

    font-weight:
        600;

    color:
        var(--ta-forest);
}


.ta-prices-benefits p {
    margin:
        5px
        0
        0;

    font-size:
        .71rem;

    line-height:
        1.35;

    color:
        var(--ta-muted);
}



/* ============================================================
   FAQ
   ============================================================ */

.ta-prices-faq {
    padding:
        51px
        0
        55px;
}


.ta-prices-faq-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        20px;
}


.ta-prices-faq-heading > a {
    min-width:
        180px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding-bottom:
        6px;

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

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-size:
        .60rem;

    font-weight:
        600;

    color:
        var(--ta-muted);
}


.ta-prices-faq-heading > a span {
    color:
        var(--ta-clay);
}


.ta-prices-faq-list {
    border-top:
        1px solid
        var(--ta-border);
}


.ta-prices-faq details {
    border-bottom:
        1px solid
        var(--ta-border);
}


.ta-prices-faq summary {
    min-height:
        57px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        11px
        8px;

    list-style:
        none;

    cursor:
        pointer;

    color:
        var(--ta-forest);
}


.ta-prices-faq summary::-webkit-details-marker {
    display:
        none;
}


.ta-prices-faq summary > span {
    font-size:
        1.05rem;

    font-weight:
        500;
}


.ta-prices-faq summary > strong {
    flex:
        0
        0
        auto;

    font-size:
        1.2rem;

    font-weight:
        400;

    color:
        var(--ta-clay);

    transition:
        transform
        320ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


.ta-prices-faq details[open]
summary > strong {
    transform:
        rotate(
            45deg
        );
}


.ta-prices-faq-answer {
    max-width:
        850px;

    padding:
        0
        8px
        19px;

    font-size:
        .82rem;

    line-height:
        1.5;

    color:
        var(--ta-muted);
}



/* ============================================================
   CLOSING
   ============================================================ */

.ta-prices-closing {
    display:
        grid;

    grid-template-columns:
        minmax(
            360px,
            .95fr
        )
        minmax(
            0,
            1.05fr
        );

    min-height:
        300px;

    background:
        var(--ta-forest-deep);

    color:
        var(--ta-ivory);
}


.ta-prices-closing-copy {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;
}


.ta-prices-closing-inner {
    width:
        min(
            100%,
            650px
        );

    padding:
        42px
        48px;
}


.ta-prices-closing h2 {
    margin:
        16px
        0
        0;

    font-size:
        clamp(
            2.8rem,
            3.8vw,
            4.2rem
        );

    line-height:
        .9;

    letter-spacing:
        -.04em;

    font-weight:
        500;

    color:
        var(--ta-ivory);
}


.ta-prices-closing p {
    max-width:
        500px;

    margin:
        13px
        0
        0;

    font-size:
        .89rem;

    line-height:
        1.48;

    color:
        rgba(
            246,
            240,
            228,
            .72
        );
}


.ta-prices-closing-inner > a {
    min-width:
        190px;

    min-height:
        45px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    margin-top:
        24px;

    padding:
        0
        17px;

    background:
        var(--ta-gold);

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-size:
        .62rem;

    font-weight:
        700;

    color:
        var(--ta-forest-deep);
}


.ta-prices-closing-inner > a strong {
    font-size:
        1rem;

    font-weight:
        400;
}


.ta-prices-closing-media {
    position:
        relative;

    min-height:
        300px;

    overflow:
        hidden;
}


.ta-prices-closing-media::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                4,
                43,
                33,
                .32
            ),
            transparent
            38%
        );

    pointer-events:
        none;
}


.ta-prices-closing-media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.ta-prices-closing-quote {
    position:
        absolute;

    right:
        38px;

    bottom:
        32px;

    z-index:
        2;

    display:
        grid;

    text-align:
        right;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        .70rem;

    color:
        var(--ta-ivory);
}


.ta-prices-closing-quote strong {
    font-weight:
        500;
}



/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1280px) {

    .ta-prices-container {
        width:
            calc(100% - 96px);

        max-width:
            none;
    }


    .ta-prices-hero-inner {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            clamp(
                280px,
                20vw,
                420px
            );

        gap:
            clamp(
                80px,
                8vw,
                180px
            );
    }


    .ta-prices-courts {
        gap:
            clamp(
                20px,
                2vw,
                38px
            );
    }


    .ta-price-card {
        padding:
            clamp(
                29px,
                2.2vw,
                43px
            );
    }

}


@media (min-width: 1800px) {

    .ta-prices-container {
        width:
            calc(100% - 128px);
    }

}



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

@media (max-width: 1023px) {

    .ta-prices-container {
        width:
            calc(100% - 64px);
    }


    .ta-prices-hero {
        min-height:
            400px;
    }


    .ta-prices-hero-inner {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            220px;

        gap:
            35px;
    }


    .ta-prices-heading {
        grid-template-columns:
            minmax(
                0,
                1fr
            );

        gap:
            25px;
    }


    .ta-prices-tabs {
        width:
            min(
                100%,
                430px
            );
    }


    .ta-prices-benefits-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .ta-prices-benefits
    article:nth-child(2) {
        border-right:
            0;
    }


    .ta-prices-benefits
    article:nth-child(-n+2) {
        border-bottom:
            1px solid
            var(--ta-border);
    }

}



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

@media (max-width: 720px) {

    .ta-prices-container {
        width:
            calc(100% - 40px);
    }


    .ta-prices-hero {
        min-height:
            470px;

        background-position:
            61% center;
    }


    .ta-prices-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(
                    4,
                    43,
                    33,
                    .96
                ),
                rgba(
                    4,
                    43,
                    33,
                    .74
                )
                72%,
                rgba(
                    4,
                    43,
                    33,
                    .45
                )
            );
    }


    .ta-prices-hero-inner {
        min-height:
            470px;

        grid-template-columns:
            1fr;

        gap:
            25px;

        align-content:
            center;
    }


    .ta-prices-hero h1 {
        font-size:
            clamp(
                3.1rem,
                14vw,
                4.4rem
            );
    }


    .ta-prices-hero-quote {
        justify-self:
            start;

        font-size:
            .68rem;
    }


    .ta-prices-main {
        padding:
            43px
            0;
    }


    .ta-prices-heading h2,
    .ta-prices-faq-heading h2 {
        font-size:
            clamp(
                2.45rem,
                11vw,
                3.3rem
            );
    }


    .ta-prices-tabs {
        width:
            100%;

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


    .ta-prices-tabs button {
        min-width:
            0;

        padding:
            8px;
    }


    .ta-prices-courts {
        grid-template-columns:
            1fr;
    }


    .ta-price-card {
        padding:
            25px
            21px;
    }


    .ta-price-rule {
        gap:
            15px;
    }


    .ta-price-rule-value > strong {
        font-size:
            1.65rem;
    }


    .ta-prices-special {
        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .ta-prices-benefits-grid {
        grid-template-columns:
            1fr
            1fr;
    }


    .ta-prices-benefits article {
        min-height:
            135px;

        padding:
            18px
            10px;
    }


    .ta-prices-faq {
        padding:
            42px
            0;
    }


    .ta-prices-faq-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .ta-prices-closing {
        grid-template-columns:
            1fr;
    }


    .ta-prices-closing-copy {
        justify-content:
            stretch;
    }


    .ta-prices-closing-inner {
        width:
            100%;

        padding:
            38px
            20px;
    }


    .ta-prices-closing-media {
        min-height:
            240px;
    }


    .ta-prices-closing-quote {
        right:
            20px;

        bottom:
            20px;
    }

}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width: 390px) {

    .ta-prices-container {
        width:
            calc(100% - 32px);
    }


    .ta-prices-tabs button strong {
        font-size:
            .75rem;
    }


    .ta-prices-tabs button span {
        font-size:
            .59rem;
    }


    .ta-prices-benefits-grid {
        grid-template-columns:
            1fr;
    }


    .ta-prices-benefits article {
        border-right:
            0;

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

}



/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ta-prices-page *,
    .ta-prices-page *::before,
    .ta-prices-page *::after {
        scroll-behavior:
            auto !important;

        transition:
            none !important;
    }

}