:root {
    --font-title: 'PPEditorialNew-Ultralight', serif;
    --font-italic: 'PPEditorialNew-UltralightItalic', serif;

    --font-title: 'BentonModDisp-Light', serif;
    --font-italic: 'BentonModDispCond-LightIt', serif;

    --serif: 'BentonModDisp-Regular', serif;

    --font-size-title: 4rem;
    --font-size-subtitle: 2rem;

    --c-rojo: #e52420;
    --c-blanco: #fff;

    --c-red: #E1251B;
    --c-red-dark: #B81A12;
    --c-ink: #161616;
    --c-ink-soft: #3A3A3A;
    --c-grey: #767676;
    --c-grey-light: #A9A9A9;
    --c-hair: #D9D7D3;
    --c-paper: #FFFFFF;
    --c-paper-warm: #F4F3F1;
    --c-beige: #F6F1E3;
    --c-black: #101010;

    --all-transition: all .4s ease-in-out;

    --wrap: 1440px;
    --gut: 24px;


}

@font-face {
    font-family: 'PPEditorialNew-Ultralight';
    src: url('/assets/m/casadecor/lib/font/PPEditorialNew-Ultralight.woff') format('woff');
    src: url('/assets/m/casadecor/lib/font/PPEditorialNew-Ultralight.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PPEditorialNew-UltralightItalic';
    src: url('/assets/m/casadecor/lib/font/PPEditorialNew-UltralightItalic.woff') format('woff');
    src: url('/assets/m/casadecor/lib/font/PPEditorialNew-UltralightItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BentonModDisp-LightIt';
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-LightIt.woff') format('woff');
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-LightIt.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BentonModDisp-Light';
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-Light.woff') format('woff');
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BentonModDispCond-LightIt';
    src: url('/assets/m/casadecor/lib/font/BentonModDispCond-LightIt.woff2') format('woff2');
    src: url('/assets/m/casadecor/lib/font/BentonModDispCond-LightIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BentonModDispCond-Light';
    src: url('/assets/m/casadecor/lib/font/BentonModDispCond-Light.woff2') format('woff2');
    src: url('/assets/m/casadecor/lib/font/BentonModDispCond-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BentonModDisp-Regular';
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-Regular.woff2') format('woff2');
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BentonModDisp-RegularIt';
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-RegularIt.woff2') format('woff2');
    src: url('/assets/m/casadecor/lib/font/BentonModDisp-RegularIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}




.serif {
    font-family: var(--font-title);
}

.italic {
    font-family: var(--font-italic);
}

.c-rojo {
    color: var(--c-rojo);
}


#primary.legado {
    .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('../images/legado/hero.jpg') no-repeat center center;
        background-size: cover;
        background-color: #0000001f;
        text-align: center;
        z-index: 1;

        p {
            padding: 0 5px;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            padding: 120px 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            row-gap: 20px;


            h1 {
                font-size: 4rem;
                color: #000;
                text-align: center;
            }

            .claim {
                font-family: var(--serif);
                font-size: 40px;

            }
        }
    }

    .content-grid {
        max-width: var(--wrap) !important;
    }

    .title-line {
        margin-bottom: 50px;
    }

    .buttoms {
        position: relative;
        display: flex;
        gap: 20px;
        padding-top: 20px;
        justify-content: center;
        align-items: center;
    }

    .section--tight {
        padding: 80px 0;
    }

    .section--bottom {
        padding-bottom: 50px;
    }

    .btn-normal {
        text-align: center;
        padding: 10px;
        background-color: var(--c-rojo);
        border: 1px solid var(--c-rojo);
        color: var(--c-blanco);
        letter-spacing: .05em;
        transition: var(--all-transition);
        text-transform: uppercase;
        min-width: 250px;

        &:hover {
            background-color: var(--c-blanco);
            border: 1px solid var(--c-rojo);
            color: var(--c-rojo);
            transition: var(--all-transition);
            cursor: pointer;

        }

        &.btn-blanco {
            background-color: var(--c-blanco);
            color: var(--c-rojo);

            &:hover {
                background-color: var(--c-rojo);
                color: var(--c-blanco);
                transition: var(--all-transition);
            }
        }
    }

    .wrap {
        max-width: var(--wrap);
        margin: 0 auto;
        padding: 0 var(--gut);
    }

    .rule-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 26px;
        margin: 0 auto;

        .rule {
            flex: 1 1 auto;
            height: 1px;
            background: var(--c-grey-light);
            position: relative;
        }

        .txt {
            font-size: var(--font-size-subtitle);
            font-weight: 300;
            letter-spacing: .06em;
            white-space: nowrap;
        }
    }

    .kicker {
        display: block;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: var(--grey);
        margin-bottom: 22px;
    }

    .txt-intro {
        margin: 26px auto 0;
        max-width: 60ch;
        line-height: 1.85;
    }

    .heritage-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 70px;
        align-items: end;
    }

    .heritage-media {
        position: relative;
    }

    .heritage-media__stamp {
        position: absolute;
        left: -34px;
        bottom: 34px;
        z-index: 2;
        max-width: 250px;
        padding: 20px 26px;
        background: var(--paper);
        color: var(--ink-soft);
        font-family: var(--serif);
        font-size: 15px;
        font-style: italic;
        line-height: 1.5;
    }

    /* Línea de tiempo */
    .timeline {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
    }

    .tl-item {
        position: relative;
    }

    .tl-item__year {
        position: absolute;
        top: -35px;
        left: 14px;
        z-index: 2;
        color: var(--c-ink);
        font-size: 52px;
        font-weight: 200;
        line-height: 1;
        letter-spacing: .02em;
    }

    /* Alternancia vertical: se anula en 08 RESPONSIVE */
    .tl-item:nth-child(even) {
        margin-top: 64px;
    }

    .tl-item__cap {
        margin-top: 14px;
        color: var(--grey);
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .tl-item__cap b {
        display: block;
        color: var(--ink-soft);
        font-weight: 800;
        letter-spacing: .14em;
    }

    .section-grey {
        background-color: var(--c-paper-warm);
    }

    .pull {
        margin: 0px 0 70px;
        text-align: center;
        font-family: var(--font-italic);
        font-size: 32px;
        font-style: italic;
        font-weight: 400;
        line-height: 1.45;
        color: var(--c-ink);
        max-width: 22ch;
        margin-left: auto;
        margin-right: auto;
    }

    .pull::before {
        content: "";
        display: block;
        width: 1px;
        height: 46px;
        margin: 0 auto 34px;
        background: var(--c-red);
    }

    .red-title {
        .tit-h2 {
            text-transform: uppercase;
            font-weight: 300;
        }
    }

    .ph--c {
        max-width: 100%;
        max-height: 350px;
        position: relative;

        &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(22, 22, 22, 0.2) 0%, rgba(22, 22, 22, 0.2) 100%);
        }
    }

    .closing {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 620px;
        text-align: center;
    }

    .closing::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, .45);
    }

    .closing__inner {
        position: relative;
        z-index: 2;
        max-width: 760px;
        padding: 0 var(--gut);
        color: var(--on-dark);
    }

    .closing__claim {
        font-family: var(--serif);
        font-size: 38px;
        font-weight: 400;
        line-height: 1.45;
    }

    .closing__claim span {
        display: block;
        font-style: italic;
    }

    .closing .btn {
        margin-top: 44px;
    }
    .txt-upper {
        text-transform: uppercase;
    }
}

/* ============================================================
   CIFRAS
   ============================================================ */
.figures-intro {
    margin: 32px auto 0;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-soft);
}

.figures {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--c-hair);
    border-left: 1px solid var(--c-hair);
}

.figure {
    border-right: 1px solid var(--c-hair);
    border-bottom: 1px solid var(--c-hair);
    padding: 52px 34px 46px;
    text-align: center;
}

.figure .n {
    font-size: 60px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--c-ink);
}

.figure .n i {
    font-style: normal;
    color: var(--c-red);
    font-weight: 300
}

.figure .n small {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: .02em
}

.figure .u {
    margin-top: 18px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-grey);
    line-height: 1.9
}

/* Proporciones */
.ph--4x5 {
    aspect-ratio: 4 / 5;
}

.ph--3x4 {
    aspect-ratio: 3 / 4;
}

.ph--4x3 {
    aspect-ratio: 4 / 3;
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}