/* =========================
   DISTRITO EVENTS V2
   LEGAL
========================= */


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

.legal-hero {
    padding-top: 11rem;
    padding-bottom: 7rem;

    background-color: var(--color-black);
    color: var(--color-white);
}


.legal-hero > .container {
    width: min(
        calc(100% - 5rem),
        96rem
    );

    margin-inline: auto;
}


.legal-hero__top {
    padding-bottom: var(--space-5);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

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

    color: var(--color-gray);

    font-size: var(--font-size-label);
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.legal-hero__content {
    padding-top: var(--space-7);
}


.legal-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(5.2rem, 9vw, 9rem);
    font-weight: 400;
    line-height: 0.84;

    letter-spacing: -0.065em;
}


.legal-hero h1 span {
    color: var(--color-champagne);
}


.legal-hero__intro {
    max-width: 580px;

    margin-top: var(--space-5);

    color: var(--color-gray-light);

    font-size: var(--font-size-body-lg);
    line-height: 1.7;
}


/* =========================
   CONTENIDO
========================= */

.legal-content {
    padding-block: 8rem;

    background-color: var(--color-cream);
    color: var(--color-black);
}


.legal-content__layout {
    display: grid;

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

    align-items: start;

    gap: var(--space-9);
}


/* =========================
   ÍNDICE
========================= */

.legal-index {
    position: sticky;
    top: 120px;
}


.legal-index__heading {
    margin-bottom: var(--space-4);
}


.legal-index__heading p {
    color: #8a8277;

    font-size: var(--font-size-caption);
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.legal-index__heading > span {
    display: none;
}


.legal-index nav {
    display: flex;
    flex-direction: column;

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


.legal-index a {
    min-height: 52px;

    padding-block: 0.9rem;

    display: grid;

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

    align-items: center;

    gap: var(--space-2);

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

    color: #5f5a53;

    font-size: var(--font-size-small);
    line-height: 1.35;

    transition:
        color var(--duration-normal) var(--ease-standard),
        padding-left var(--duration-normal) var(--ease-standard);
}


.legal-index a > span {
    color: #a49b90;

    font-size: 0.68rem;
    font-weight: 600;

    letter-spacing: 0.12em;
}


.legal-index a:hover {
    padding-left: 0.25rem;

    color: var(--color-black);
}


/* =========================
   ARTÍCULO
========================= */

.legal-article {
    max-width: 850px;
}


.legal-article section {
    padding-bottom: var(--space-8);

    scroll-margin-top: 120px;
}


.legal-article section + section {
    padding-top: var(--space-7);

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


.legal-article section:target {
    animation: legal-target 900ms ease-out;
}


@keyframes legal-target {

    from {
        opacity: 0.55;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.legal-number {
    display: inline-block;

    margin-bottom: var(--space-3);

    color: var(--color-champagne);

    font-size: var(--font-size-label);
    font-weight: 600;

    letter-spacing: 0.16em;
}


.legal-article h2 {
    max-width: 760px;

    margin-bottom: var(--space-4);

    font-family: var(--font-display);
    font-size: clamp(2.7rem, 4vw, 4.3rem);
    font-weight: 400;
    line-height: 0.95;

    letter-spacing: -0.045em;
}


.legal-article p {
    max-width: 760px;

    color: #5f5a53;

    line-height: 1.75;
}


.legal-article p + p {
    margin-top: var(--space-3);
}


/* =========================
   DATOS PENDIENTES
========================= */

.legal-placeholder {
    margin-top: var(--space-5);

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

    background-color:
        rgba(255, 255, 255, 0.45);
}


.legal-placeholder > div {
    min-height: 64px;

    padding:
        1rem
        1.25rem;

    display: grid;

    grid-template-columns:
        minmax(150px, 0.4fr)
        minmax(0, 0.6fr);

    align-items: center;

    gap: var(--space-4);
}


.legal-placeholder > div + div {
    border-top:
        1px solid
        var(--color-border-light);
}


.legal-placeholder span {
    color: #7c746a;

    font-size: var(--font-size-small);
    font-weight: 500;
}


.legal-placeholder strong {
    color: var(--color-black);

    font-size: var(--font-size-small);
    font-weight: 600;
}


.legal-placeholder--single {
    max-width: 680px;
}


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

.legal-footer {
    padding-top: 6rem;
    padding-bottom: var(--space-5);

    background-color: var(--color-black-soft);
    color: var(--color-white);
}


.legal-footer__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-7);
}


.legal-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap:
        var(--space-3)
        var(--space-5);

    color: var(--color-gray-light);

    font-size: var(--font-size-small);
}


.legal-footer__links a:hover {
    color: var(--color-white);
}


.legal-footer__bottom {
    margin-top: 6rem;
    padding-top: var(--space-4);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

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

    color: var(--color-gray);

    font-size: var(--font-size-small);
}


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

@media (max-width: 1024px) {

    .legal-hero > .container {
        width: min(
            calc(100% - 4rem),
            100%
        );
    }


    .legal-content__layout {
        grid-template-columns: 1fr;

        gap: var(--space-7);
    }


    .legal-index {
        position: static;
    }


    .legal-index nav {
        display: grid;

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

        column-gap: var(--space-5);
    }


    .legal-article {
        max-width: 100%;
    }

}


/* =========================
   MÓVIL
========================= */

@media (max-width: 768px) {

    /* HERO */

    .legal-hero {
        padding-top: 8rem;
        padding-bottom: 5rem;
    }


    .legal-hero > .container {
        width: min(
            calc(100% - 2.5rem),
            100%
        );
    }


    .legal-hero__top {
        gap: var(--space-3);

        font-size: 0.68rem;
    }


    .legal-hero__content {
        padding-top: var(--space-6);
    }


    .legal-hero h1 {
        font-size: clamp(3.7rem, 15vw, 5.3rem);
        line-height: 0.87;
    }


    .legal-hero__intro {
        font-size: 1rem;
    }


    /* CONTENIDO */

    .legal-content {
        padding-block: 5rem;

        overflow: hidden;
    }


    .legal-content__layout {
        gap: var(--space-6);
    }


    /* ÍNDICE MÓVIL */

    .legal-index {
        width: 100%;
    }


    .legal-index__heading {
        margin-bottom: var(--space-3);

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: var(--space-3);
    }


    .legal-index__heading > span {
        display: block;

        color: #92897e;

        font-size: 0.6rem;
        font-weight: 600;

        letter-spacing: 0.11em;
        white-space: nowrap;
    }


    .legal-index nav {
        width: calc(
            100% +
            (var(--page-padding-mobile) * 2)
        );

        margin-left:
            calc(
                var(--page-padding-mobile) * -1
            );

        padding-left:
            calc(
                var(--page-padding-mobile) + 0.75rem
            );

        padding-right:
            var(--page-padding-mobile);

        display: flex;
        flex-direction: row;

        gap: 0.65rem;

        overflow-x: auto;
        overflow-y: hidden;

        border: 0;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        scroll-padding-left:
            calc(
                var(--page-padding-mobile) + 0.75rem
            );

        overscroll-behavior-inline: contain;

        scrollbar-width: none;
    }


    .legal-index nav::-webkit-scrollbar {
        display: none;
    }


    .legal-index a {
        width: auto;
        min-width: max-content;
        min-height: 46px;

        padding:
            0.8rem
            1rem;

        display: flex;

        gap: 0.55rem;

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

        border-radius: 999px;

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

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }


    .legal-index a:hover {
        padding-left: 1rem;
    }


    /* ARTÍCULO */

    .legal-article section {
        padding-bottom: var(--space-6);

        scroll-margin-top: 95px;
    }


    .legal-article section + section {
        padding-top: var(--space-6);
    }


    .legal-article h2 {
        font-size:
            clamp(
                2.4rem,
                10vw,
                3.3rem
            );
    }


    .legal-article p {
        font-size: 0.96rem;
    }


    /* DATOS */

    .legal-placeholder > div {
        grid-template-columns: 1fr;

        gap: 0.35rem;
    }


    /* FOOTER */

    .legal-footer {
        padding-top: 5rem;
    }


    .legal-footer__main {
        flex-direction: column;

        gap: var(--space-6);
    }


    .legal-footer__links {
        justify-content: flex-start;
    }


    .legal-footer__bottom {
        margin-top: 4rem;

        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-3);
    }

}


/* =========================
   MÓVIL PEQUEÑO
========================= */

@media (max-width: 430px) {

    .legal-hero h1 {
        font-size:
            clamp(
                3.3rem,
                14.5vw,
                4.7rem
            );
    }


    .legal-index__heading {
        align-items: flex-end;
    }


    .legal-index__heading > span {
        max-width: 145px;

        text-align: right;
        white-space: normal;
    }


    .legal-footer__links {
        width: 100%;

        display: grid;

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

}


/* =========================
   MOVIMIENTO REDUCIDO
========================= */

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

    .legal-article section:target {
        animation: none;
    }


    .legal-index nav {
        scroll-behavior: auto;
    }

}