/* =========================================================
   VISARIO — INFORMACIÓN LEGAL
========================================================= */

:root {

    --background:
        #f7f5f1;

    --surface:
        #ffffff;

    --text:
        #1b1a18;

    --muted:
        #716d67;

    --line:
        rgba(27, 26, 24, 0.12);

    --accent:
        #b9906e;

    --accent-soft:
        rgba(185, 144, 110, 0.12);

    --dark:
        #23211e;

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing:
        border-box;
}


html {
    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    background:
        var(--background);

    color:
        var(--text);

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

    font-weight:
        300;

    line-height:
        1.65;

}


a {
    color:
        inherit;

    text-decoration:
        none;
}


/* =========================================================
   HEADER
========================================================= */

.legal-header {

    width:
        100%;

    min-height:
        84px;

    padding:
        0 6vw;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    background:
        rgba(247, 245, 241, 0.95);

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    backdrop-filter:
        blur(12px);

}


.legal-brand {

    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;

}


.legal-brand span {

    font-size:
        1rem;

    font-weight:
        600;

    letter-spacing:
        0.16em;

}


.legal-brand small {

    font-family:
        "Playfair Display",
        serif;

    font-style:
        italic;

    color:
        var(--muted);

}


.legal-back {

    font-size:
        0.82rem;

    font-weight:
        500;

    letter-spacing:
        0.05em;

    color:
        var(--muted);

    transition:
        color 0.2s ease;

}


.legal-back:hover {
    color:
        var(--text);
}


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

.legal-hero {

    padding:
        110px 6vw 90px;

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

}


.legal-hero-content {

    width:
        min(860px, 100%);

}


.legal-kicker {

    margin:
        0 0 24px;

    font-size:
        0.72rem;

    font-weight:
        600;

    letter-spacing:
        0.18em;

    color:
        var(--accent);

}


.legal-hero h1 {

    margin:
        0;

    max-width:
        800px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            3rem,
            6vw,
            5.8rem
        );

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        -0.04em;

}


.legal-hero h1 em {

    display:
        block;

    font-weight:
        400;

    color:
        var(--accent);

}


.legal-hero-text {

    margin:
        40px 0 0;

    max-width:
        620px;

    font-size:
        1.05rem;

    color:
        var(--muted);

}


/* =========================================================
   LAYOUT
========================================================= */

.legal-layout {

    width:
        min(1400px, 100%);

    margin:
        0 auto;

    padding:
        80px 6vw 120px;

    display:
        grid;

    grid-template-columns:
        260px minmax(0, 860px);

    gap:
        8vw;

    justify-content:
        center;

}


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

.legal-index {

    position:
        sticky;

    top:
        120px;

    align-self:
        start;

}


.legal-index-title {

    margin:
        0 0 20px;

    font-size:
        0.67rem;

    font-weight:
        600;

    letter-spacing:
        0.16em;

    color:
        var(--muted);

}


.legal-index nav {

    display:
        flex;

    flex-direction:
        column;

}


.legal-index nav a {

    display:
        grid;

    grid-template-columns:
        30px 1fr;

    gap:
        10px;

    padding:
        17px 0;

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

    font-size:
        0.9rem;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;

}


.legal-index nav a:first-child {

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

}


.legal-index nav a span {

    font-size:
        0.68rem;

    color:
        var(--accent);

}


.legal-index nav a:hover {

    color:
        var(--accent);

    padding-left:
        5px;

}


.legal-contact-card {

    margin-top:
        40px;

    padding:
        22px;

    background:
        var(--dark);

    color:
        #ffffff;

}


.legal-contact-card p {

    margin:
        0 0 14px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.05rem;

    line-height:
        1.35;

}


.legal-contact-card a {

    font-size:
        0.77rem;

    color:
        rgba(255, 255, 255, 0.7);

}


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

.legal-content {

    min-width:
        0;

}


.legal-section {

    scroll-margin-top:
        130px;

    padding:
        0 0 110px;

    margin:
        0 0 100px;

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

}


.legal-section-heading {

    display:
        grid;

    grid-template-columns:
        50px 1fr;

    gap:
        22px;

    align-items:
        start;

    margin-bottom:
        55px;

}


.legal-section-heading > span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

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

    border-radius:
        50%;

    font-size:
        0.7rem;

    color:
        var(--accent);

}


.legal-section-heading p {

    margin:
        2px 0 8px;

    font-size:
        0.67rem;

    font-weight:
        600;

    letter-spacing:
        0.16em;

    color:
        var(--accent);

}


.legal-section-heading h2 {

    margin:
        0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            2.1rem,
            4vw,
            3.6rem
        );

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -0.025em;

}


/* =========================================================
   TEXTO LEGAL
========================================================= */

.legal-copy {

    padding-left:
        72px;

}


.legal-copy h3 {

    margin:
        58px 0 18px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.45rem;

    font-weight:
        500;

    line-height:
        1.3;

}


.legal-copy h3:first-child {

    margin-top:
        0;

}


.legal-copy p {

    margin:
        0 0 18px;

    font-size:
        0.97rem;

    color:
        #4f4b46;

}


.legal-copy strong {

    font-weight:
        600;

    color:
        var(--text);

}


.legal-copy ul {

    margin:
        24px 0 30px;

    padding:
        0;

    list-style:
        none;

}


.legal-copy li {

    position:
        relative;

    padding:
        10px 0 10px 25px;

    color:
        #4f4b46;

    border-bottom:
        1px solid rgba(27, 26, 24, 0.07);

}


.legal-copy li::before {

    content:
        "";

    position:
        absolute;

    left:
        2px;

    top:
        19px;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--accent);

}


.legal-copy a {

    color:
        var(--accent);

    border-bottom:
        1px solid rgba(185, 144, 110, 0.35);

}


/* =========================================================
   CAJAS
========================================================= */

.legal-info-box {

    margin:
        30px 0 50px;

    padding:
        28px 30px;

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

    background:
        var(--surface);

}


.legal-info-box p {

    margin:
        0;

    padding:
        10px 0;

    border-bottom:
        1px solid rgba(27, 26, 24, 0.07);

}


.legal-info-box p:last-child {

    border-bottom:
        0;

}


.legal-highlight {

    display:
        inline-block;

    padding:
        14px 18px;

    background:
        var(--accent-soft);

}


.legal-warning {

    margin:
        55px 0;

    padding:
        38px;

    background:
        var(--dark);

    color:
        #ffffff;

}


.legal-warning > span {

    display:
        block;

    margin-bottom:
        16px;

    font-size:
        0.66rem;

    font-weight:
        600;

    letter-spacing:
        0.18em;

    color:
        #d7b99d;

}


.legal-warning h3 {

    margin:
        0 0 18px;

    color:
        #ffffff;

    font-size:
        1.8rem;

}


.legal-warning p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.72);

}


/* =========================================================
   ACTUALIZACIÓN
========================================================= */

.legal-update {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        25px 0;

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

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

}


.legal-update span {

    font-size:
        0.67rem;

    font-weight:
        600;

    letter-spacing:
        0.15em;

    color:
        var(--muted);

}


.legal-update strong {

    font-size:
        0.88rem;

    font-weight:
        500;

}


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

.legal-footer {

    padding:
        40px 6vw;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    background:
        var(--dark);

    color:
        #ffffff;

}


.legal-footer-brand {

    font-weight:
        600;

    letter-spacing:
        0.15em;

}


.legal-footer p {

    margin:
        0;

    font-size:
        0.75rem;

    color:
        rgba(255, 255, 255, 0.55);

}


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

@media (
    max-width: 900px
) {

    .legal-layout {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .legal-index {

        position:
            static;

    }


    .legal-contact-card {

        display:
            none;

    }

}


@media (
    max-width: 600px
) {

    .legal-header {

        min-height:
            72px;

        padding:
            0 22px;

    }


    .legal-brand small {

        display:
            none;

    }


    .legal-back {

        font-size:
            0.75rem;

    }


    .legal-hero {

        padding:
            75px 22px 60px;

    }


    .legal-layout {

        padding:
            55px 22px 90px;

    }


    .legal-section-heading {

        grid-template-columns:
            38px 1fr;

        gap:
            15px;

        margin-bottom:
            40px;

    }


    .legal-section-heading > span {

        width:
            34px;

        height:
            34px;

    }


    .legal-copy {

        padding-left:
            0;

    }


    .legal-copy h3 {

        margin-top:
            45px;

    }


    .legal-info-box {

        padding:
            22px;

    }


    .legal-warning {

        padding:
            28px 24px;

    }


    .legal-update {

        flex-direction:
            column;

    }


    .legal-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            35px 22px;

    }

}