/* ================================================================
   AP NEURAL WEB — LEGAL SYSTEM V1
   Privacidad / Cookies / Términos / Aviso legal
================================================================ */

.page-legal {
    background:
        #08090B;

    color:
        #F3F3F1;

    overflow-x:
        clip;
}

.legal-main {
    position:
        relative;

    z-index:
        2;
}


/* ================================================================
   BACKGROUND

   Muy sobrio a propósito.
================================================================ */

.legal-field {
    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 77% 14%,
            rgba(139,21,56,.055),
            transparent 28rem
        ),

        linear-gradient(
            180deg,
            rgba(16,17,20,.10),
            transparent 42%
        );
}


.legal-field__line {
    position:
        absolute;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(181,32,74,.14),
            transparent
        );
}


.legal-field__line--01 {
    top:
        18%;

    left:
        54%;

    width:
        42%;
}


.legal-field__line--02 {
    top:
        47%;

    left:
        64%;

    width:
        30%;

    opacity:
        .55;
}


.legal-field__line--03 {
    top:
        76%;

    left:
        57%;

    width:
        38%;

    opacity:
        .36;
}


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

.legal-hero {
    position:
        relative;

    padding:
        clamp(9rem,14vw,12rem)
        0
        clamp(4rem,8vw,7rem);

    border-bottom:

        1px solid
        rgba(52,54,61,.48);
}


.legal-hero__top {
    display:
        grid;

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

    gap:
        clamp(3rem,8vw,8rem);

    align-items:
        end;
}


.legal-hero__copy {
    max-width:
        62rem;
}


.legal-eyebrow {
    margin-bottom:
        1.35rem;

    color:
        #B5204A;

    font-family:
        var(--font-mono);

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.legal-hero h1 {
    max-width:
        12ch;

    margin:
        0 0 1.7rem;

    color:
        #F3F3F1;

    font-family:
        var(--font-display);

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

    font-weight:
        600;

    line-height:
        .92;

    letter-spacing:
        -.055em;

    text-transform:
        uppercase;

    text-wrap:
        balance;
}


.legal-hero__copy > p {
    max-width:
        48rem;

    margin:
        0;

    color:
        #BFC1C6;

    font-size:
        clamp(1rem,1.2vw,1.2rem);

    line-height:
        1.8;
}


.legal-meta {
    display:
        flex;

    gap:
        .75rem 1rem;

    align-items:
        center;

    flex-wrap:
        wrap;

    margin-top:
        2rem;

    padding-top:
        1rem;

    border-top:

        1px solid
        rgba(52,54,61,.42);

    color:
        #979AA2;

    font-family:
        var(--font-mono);

    font-size:
        .64rem;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.legal-meta strong {
    color:
        #D1D2D5;
}


/* ================================================================
   BRAND
================================================================ */

.legal-brand {
    display:
        grid;

    justify-items:
        center;

    gap:
        1.2rem;

    min-width:
        13rem;

    text-align:
        center;
}


.legal-brand__frame {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        clamp(7.5rem,10vw,10rem);

    aspect-ratio:
        1;

    border:

        1px solid
        rgba(151,154,162,.16);

    transform:
        rotate(45deg);

    background:
        rgba(16,17,20,.38);
}


.legal-brand__frame::before {
    content:
        "";

    position:
        absolute;

    inset:
        14%;

    border:

        1px solid
        rgba(181,32,74,.25);
}


.legal-brand__logo {
    width:
        45%;

    height:
        45%;

    transform:
        rotate(-45deg);

    background:

        linear-gradient(
            150deg,
            #F3F3F1 0%,
            #BFC1C6 29%,
            #B5204A 59%,
            #8B1538 80%,
            #F3F3F1 100%
        );

    -webkit-mask:

        url("../../svg/ap-logo-animated.svg")
        center / contain
        no-repeat;

    mask:

        url("../../svg/ap-logo-animated.svg")
        center / contain
        no-repeat;

    filter:

        drop-shadow(
            0 0 6px
            rgba(181,32,74,.13)
        );
}


.legal-brand__identity {
    display:
        grid;

    gap:
        .3rem;
}


.legal-brand__identity strong {
    font-family:
        var(--font-display);

    font-size:
        .85rem;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.legal-brand__identity span {
    color:
        #797C84;

    font-family:
        var(--font-mono);

    font-size:
        .56rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


/* ================================================================
   DOCUMENT
================================================================ */

.legal-document {
    padding:

        clamp(4rem,8vw,7rem)
        0
        clamp(6rem,10vw,9rem);
}


.legal-document__grid {
    display:
        grid;

    grid-template-columns:
        minmax(13rem,.28fr)
        minmax(0,1fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items:
        start;
}


/* ================================================================
   INDEX
================================================================ */

.legal-index {
    position:
        relative;
}


.legal-index__inner {
    position:
        sticky;

    top:
        7.5rem;

    padding:
        1rem 0 1rem 1rem;

    border-left:

        1px solid
        rgba(52,54,61,.54);
}


.legal-index__label {
    display:
        block;

    margin-bottom:
        1rem;

    color:
        #B5204A;

    font-family:
        var(--font-mono);

    font-size:
        .57rem;

    font-weight:
        700;

    letter-spacing:
        .13em;
}


.legal-index nav {
    display:
        grid;

    gap:
        .2rem;
}


.legal-index a {
    display:
        grid;

    grid-template-columns:
        1.7rem 1fr;

    gap:
        .5rem;

    align-items:
        baseline;

    padding:
        .42rem 0;

    color:
        #797C84;

    font-size:
        .73rem;

    line-height:
        1.35;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


.legal-index a span {
    color:
        #580B23;

    font-family:
        var(--font-mono);

    font-size:
        .52rem;
}


@media (hover:hover) and (pointer:fine) {

    .legal-index a:hover {
        color:
            #D6D7DA;

        transform:
            translateX(.18rem);
    }

}


/* ================================================================
   CONTENT
================================================================ */

.legal-content {
    max-width:
        58rem;
}


.legal-intro {
    margin-bottom:
        2rem;

    padding:
        1.25rem 1.35rem;

    border:

        1px solid
        rgba(151,154,162,.12);

    border-left:

        2px solid
        #8B1538;

    background:
        rgba(16,17,20,.42);
}


.legal-intro strong {
    display:
        block;

    margin-bottom:
        .55rem;

    color:
        #E8E8E6;

    font-size:
        .9rem;
}


.legal-intro p {
    margin:
        0;

    color:
        #A3A5AB;

    font-size:
        .91rem;

    line-height:
        1.75;
}


/* ================================================================
   LEGAL SECTIONS
================================================================ */

.legal-section {
    display:
        grid;

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

    gap:
        clamp(1.25rem,3vw,2.5rem);

    padding:
        clamp(2.5rem,5vw,4.2rem)
        0;

    border-bottom:

        1px solid
        rgba(52,54,61,.45);

    scroll-margin-top:
        7rem;
}


.legal-section__number {
    padding-top:
        .25rem;

    color:
        #8B1538;

    font-family:
        var(--font-mono);

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .10em;
}


.legal-section h2 {
    margin:
        0 0 1.4rem;

    color:
        #F3F3F1;

    font-family:
        var(--font-display);

    font-size:
        clamp(1.7rem,3vw,2.6rem);

    font-weight:
        550;

    line-height:
        1.08;

    letter-spacing:
        -.025em;
}


.legal-section p {
    margin:
        0 0 1.15rem;

    color:
        #A3A5AB;

    font-size:
        .96rem;

    line-height:
        1.85;
}


.legal-section p:last-child {
    margin-bottom:
        0;
}


.legal-note {
    padding:
        .9rem 1rem;

    border-left:

        1px solid
        rgba(181,32,74,.38);

    background:
        rgba(88,11,35,.055);
}


/* ================================================================
   CONTACT LINE
================================================================ */

.legal-contact-line {
    display:
        grid;

    grid-template-columns:
        7rem 1fr;

    gap:
        1rem;

    margin:
        1.5rem 0;

    padding:
        .9rem 0;

    border-top:

        1px solid
        rgba(52,54,61,.42);

    border-bottom:

        1px solid
        rgba(52,54,61,.42);

    font-size:
        .88rem;
}


.legal-contact-line span {
    color:
        #797C84;

    font-family:
        var(--font-mono);

    font-size:
        .59rem;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.legal-contact-line a {
    color:
        #D8D9DC;

    overflow-wrap:
        anywhere;
}


/* ================================================================
   CROSS LINK
================================================================ */

.legal-crosslink {
    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        2rem;

    align-items:
        center;

    margin:
        clamp(2.5rem,5vw,4rem)
        0;

    padding:
        1.3rem;

    border:

        1px solid
        rgba(139,21,56,.24);

    background:

        linear-gradient(
            90deg,
            rgba(88,11,35,.10),
            rgba(16,17,20,.32)
        );
}


.legal-crosslink > div {
    display:
        grid;

    gap:
        .4rem;
}


.legal-crosslink > div span {
    color:
        #B5204A;

    font-family:
        var(--font-mono);

    font-size:
        .56rem;

    letter-spacing:
        .12em;
}


.legal-crosslink > div strong {
    color:
        #D4D5D8;

    font-size:
        .9rem;
}


.legal-crosslink > a {
    display:
        inline-flex;

    gap:
        .8rem;

    align-items:
        center;

    color:
        #F3F3F1;

    font-size:
        .8rem;

    white-space:
        nowrap;
}


.legal-crosslink > a span {
    color:
        #B5204A;
}


/* ================================================================
   PRIMARY LEGAL CONTACT
================================================================ */

.legal-primary-contact {
    position:
        relative;

    display:
        grid;

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

    gap:
        1rem;

    align-items:
        center;

    margin-top:
        1.7rem;

    padding:
        1.2rem;

    border:

        1px solid
        rgba(151,154,162,.13);

    background:
        rgba(16,17,20,.44);

    overflow:
        hidden;
}


.legal-primary-contact::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        2px;

    background:
        #8B1538;
}


.legal-primary-contact > span {
    color:
        #8B1538;

    font-family:
        var(--font-mono);

    font-size:
        .55rem;

    letter-spacing:
        .11em;
}


.legal-primary-contact strong {
    color:
        #E3E4E6;

    font-size:
        .88rem;

    overflow-wrap:
        anywhere;
}


.legal-primary-contact i {
    color:
        #B5204A;

    font-style:
        normal;

    transition:
        transform 180ms ease;
}


@media (hover:hover) and (pointer:fine) {

    .legal-primary-contact:hover i {
        transform:
            translateX(.25rem);
    }

}


/* ================================================================
   RELATED LEGAL DOCUMENTS
================================================================ */

.legal-related {
    padding-top:
        clamp(4rem,7vw,6rem);
}


.legal-related__label {
    display:
        block;

    margin-bottom:
        1rem;

    color:
        #797C84;

    font-family:
        var(--font-mono);

    font-size:
        .57rem;

    letter-spacing:
        .13em;
}


.legal-related__grid {
    display:
        grid;

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

    gap:
        .55rem;
}


.legal-related__grid a {
    display:
        grid;

    gap:
        2.5rem;

    min-height:
        9rem;

    padding:
        1rem;

    border:

        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(16,17,20,.34);

    transition:
        border-color 180ms ease,
        background 180ms ease;
}


.legal-related__grid span {
    color:
        #8B1538;

    font-family:
        var(--font-mono);

    font-size:
        .55rem;
}


.legal-related__grid strong {
    align-self:
        end;

    color:
        #C9CACD;

    font-family:
        var(--font-display);

    font-size:
        1rem;

    text-transform:
        uppercase;
}


@media (hover:hover) and (pointer:fine) {

    .legal-related__grid a:hover {
        border-color:
            rgba(181,32,74,.28);

        background:
            rgba(88,11,35,.055);
    }

}


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

.legal-footer {
    position:
        relative;

    z-index:
        3;

    padding:

        clamp(3.5rem,6vw,5.5rem)
        0
        1.5rem;

    background:
        #08090B;

    border-top:

        1px solid
        rgba(52,54,61,.55);
}


.legal-footer::before {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        -1px;

    width:
        min(7rem,24vw);

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        #8B1538;
}


.legal-footer
.site-footer__grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items:
        start;
}


.legal-footer
.site-footer__brand {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        1rem;
}


.legal-footer
.site-footer__brand > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        .4rem;
}


.legal-footer
.site-footer__brand strong {
    font-family:
        var(--font-display);

    text-transform:
        uppercase;
}


.legal-footer
.site-footer__brand > div span {
    color:
        var(--color-text-muted);

    font-size:
        .82rem;
}


.legal-footer
.site-footer__nav {
    display:
        grid;

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

    gap:
        2rem;
}


.legal-footer
.site-footer__nav > div {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        .68rem;
}


.legal-footer
.site-footer__nav strong {
    margin-bottom:
        .25rem;

    color:
        #B5204A;

    font-family:
        var(--font-mono);

    font-size:
        .63rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.legal-footer
.site-footer__nav a {
    position:
        relative;

    width:
        fit-content;

    max-width:
        100%;

    color:
        var(--color-text-muted);

    font-size:
        .87rem;
}


/*
NO añadimos ::after.
El activo sigue gobernado por components.css.
*/


.legal-footer
.site-footer__bottom {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-top:
        4rem;

    padding-top:
        1.25rem;

    border-top:

        1px solid
        rgba(52,54,61,.48);

    color:
        rgba(151,154,162,.58);

    font-family:
        var(--font-mono);

    font-size:
        .61rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


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

@media (max-width:960px) {

    .legal-document__grid {
        grid-template-columns:
            12rem minmax(0,1fr);

        gap:
            3rem;
    }


    .legal-index__inner {
        top:
            6.5rem;
    }


    .legal-footer
    .site-footer__grid {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width:767px) {

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


    .legal-hero__top {
        grid-template-columns:
            1fr;
    }


    .legal-brand {
        justify-items:
            start;

        text-align:
            left;
    }


    .legal-brand__frame {
        width:
            7.2rem;
    }


    .legal-document__grid {
        grid-template-columns:
            1fr;
    }


    /*
    Índice deja de ser sticky y se transforma
    en una cuadrícula compacta.
    */

    .legal-index__inner {
        position:
            static;

        padding:
            1rem;

        border-left:
            0;

        border:

            1px solid
            rgba(151,154,162,.10);

        background:
            rgba(16,17,20,.30);
    }


    .legal-index nav {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            .15rem .8rem;
    }


    .legal-section {
        grid-template-columns:
            2.2rem minmax(0,1fr);

        gap:
            .8rem;
    }


    .legal-section p {
        font-size:
            .93rem;
    }


    .legal-crosslink {
        grid-template-columns:
            1fr;
    }


    .legal-crosslink > a {
        white-space:
            normal;
    }


    .legal-primary-contact {
        grid-template-columns:
            1fr auto;
    }


    .legal-primary-contact > span {
        grid-column:
            1 / -1;
    }


    .legal-related__grid {
        grid-template-columns:
            1fr;
    }


    .legal-related__grid a {
        min-height:
            7rem;
    }


    .legal-footer
    .site-footer__nav {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            2rem 1.4rem;
    }


    .legal-footer
    .site-footer__bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            2.7rem;
    }

}


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

@media (max-width:479px) {

    .legal-index nav {
        grid-template-columns:
            1fr;
    }


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

        gap:
            .8rem;
    }


    .legal-section__number {
        padding:
            0 0 .5rem;

        border-bottom:

            1px solid
            rgba(139,21,56,.25);
    }


    .legal-contact-line {
        grid-template-columns:
            1fr;

        gap:
            .4rem;
    }


    .legal-primary-contact {
        grid-template-columns:
            1fr;
    }


    .legal-primary-contact i {
        display:
            none;
    }


    .legal-footer
    .site-footer__nav {
        grid-template-columns:
            1fr;
    }

}


/* ================================================================
   ACCESSIBILITY
================================================================ */

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

    .legal-index a,
    .legal-primary-contact i,
    .legal-related__grid a {
        transition:
            none !important;
    }

}