/* ==================================================
   BIBLIOTECA TECNICA DELTA
   ================================================== */

.delta-library {
    background: #ededE8;
    color: #111;
}


/* HERO */

.delta-library-hero {
    min-height: 82svh;

    display: flex;
    align-items: flex-end;

    padding:
        150px
        var(--delta-pad)
        85px;

    background: #080808;
    color: #f2f2ee;
}


.delta-library-hero-inner {
    width: 100%;
}


.delta-library-hero h1 {
    margin:
        25px
        0
        60px;

    font-size:
        clamp(4.5rem,10vw,10rem);

    line-height: .78;

    letter-spacing: -.075em;
}


.delta-library-hero h1 span {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.55);
}


.delta-library-intro {
    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    gap: 70px;

    align-items: end;

    max-width: 1100px;

    padding-top: 30px;

    border-top:
        1px solid rgba(255,255,255,.17);
}


.delta-library-intro > p {
    max-width: 520px;

    margin: 0;

    color: #989894;

    line-height: 1.65;
}


.delta-library-intro div {
    display: flex;
    flex-direction: column;
}


.delta-library-intro strong {
    font-size:
        clamp(2.5rem,4vw,4.5rem);

    font-weight: 500;

    line-height: .9;
}


.delta-library-intro span {
    margin-top: 10px;

    color: #72726e;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .17em;
}


/* FILOSOFIA */

.delta-library-philosophy {
    padding:
        105px
        var(--delta-pad);

    border-bottom:
        1px solid rgba(0,0,0,.15);
}


.delta-library-philosophy h2 {
    max-width: 900px;

    margin:
        20px
        0
        35px;

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

    line-height: .88;

    letter-spacing: -.06em;
}


.delta-library-philosophy > p:last-child {
    max-width: 600px;

    color: #686864;

    font-size: 14px;

    line-height: 1.65;
}


/* FAMILIAS */

.delta-library-families {
    padding:
        0
        var(--delta-pad);
}


.delta-library-family {
    display: grid;

    grid-template-columns:
        .72fr
        1.28fr;

    gap: 7vw;

    padding:
        80px
        0;

    border-bottom:
        1px solid rgba(0,0,0,.18);
}


.delta-library-family-head {
    display: grid;

    grid-template-columns:
        45px
        1fr;

    gap: 20px;
}


.delta-library-family-head > span,
.delta-library-family-head p {
    color: #858580;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .18em;
}


.delta-library-family-head p {
    margin: 0 0 15px;
}


.delta-library-family-head h2 {
    margin: 0;

    max-width: 460px;

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

    line-height: .93;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.delta-library-family-head small {
    display: block;

    max-width: 410px;

    margin-top: 23px;

    color: #696965;

    font-size: 12px;

    line-height: 1.6;
}


/* GUIAS */

.delta-library-guides {
    border-top:
        1px solid rgba(0,0,0,.18);
}


.delta-library-guide {
    display: grid;

    grid-template-columns:
        70px
        1fr
        auto;

    gap: 20px;

    align-items: center;

    min-height: 82px;

    border-bottom:
        1px solid rgba(0,0,0,.18);

    transition:
        padding .22s ease,
        background .22s ease;
}


.delta-library-guide:hover {
    padding:
        0
        14px;

    background:
        rgba(0,0,0,.035);
}


.delta-library-code,
.delta-library-status {
    color: #858580;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .16em;
}


.delta-library-guide h3 {
    margin: 0;

    font-size:
        clamp(.95rem,1.35vw,1.22rem);

    font-weight: 500;

    letter-spacing: -.02em;
}


.delta-library-status {
    border:
        1px solid rgba(0,0,0,.20);

    border-radius: 100px;

    padding:
        6px
        9px;
}


/* FINAL */

.delta-library-final {
    padding:
        120px
        var(--delta-pad);

    background: #090909;
    color: #eeeEE9;
}


.delta-library-final h2 {
    margin:
        18px
        0
        55px;

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

    line-height: .88;

    letter-spacing: -.06em;
}


.delta-library-final a {
    display: inline-block;

    padding:
        13px
        18px;

    border:
        1px solid rgba(255,255,255,.3);

    border-radius: 100px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .12em;
}


/* MOBILE */

@media(max-width:900px) {

    .delta-library-intro {
        grid-template-columns:
            1fr
            1fr;
    }


    .delta-library-intro > p {
        grid-column:
            1 / -1;
    }


    .delta-library-family {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}


@media(max-width:520px) {

    .delta-library-hero,
    .delta-library-philosophy,
    .delta-library-families,
    .delta-library-final {
        padding-left: 6vw;
        padding-right: 6vw;
    }


    .delta-library-hero h1 {
        font-size: 3.7rem;
    }


    .delta-library-intro {
        gap: 35px;
    }


    .delta-library-family-head {
        grid-template-columns:
            35px
            1fr;
    }


    .delta-library-guide {
        grid-template-columns:
            57px
            1fr
            auto;
    }

}


/* ==================================================
   ANCLAS DIRECTAS A GUIAS
   ================================================== */

.delta-library-guide {
    scroll-margin-top: 115px;
}


/* Pequeña señal al llegar desde un enlace directo */

.delta-library-guide:target {
    background:
        rgba(0,0,0,.055);

    padding-left: 14px;
    padding-right: 14px;
}



/* ==================================================
   GUIAS ACTIVAS
   ================================================== */

.delta-library-guide-active {
    cursor: pointer;
}


.delta-library-guide-active:hover
.delta-library-status {
    background: #111;
    border-color: #111;
    color: #fff;
}



/* =========================================================
   DELTA · BIBLIOTECA → SERVICIOS
   ========================================================= */

.delta-library-services {
    padding: 110px 5vw 120px;
    border-top: 1px solid rgba(0,0,0,.16);
}

.delta-library-services-head {
    max-width: 950px;
    margin-bottom: 70px;
}

.delta-library-services-head h2 {
    margin: 0 0 32px;
    font-size: clamp(42px, 5vw, 78px);
    line-height: .95;
    letter-spacing: -.05em;
}

.delta-library-services-head > p:last-child {
    max-width: 580px;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    opacity: .62;
}

.delta-library-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(0,0,0,.22);
    border-left: 1px solid rgba(0,0,0,.22);
}

.delta-library-services-grid a {
    min-height: 225px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-right: 1px solid rgba(0,0,0,.22);
    border-bottom: 1px solid rgba(0,0,0,.22);
    color: inherit;
    text-decoration: none;
    transition: background .2s ease;
}

.delta-library-services-grid a:hover {
    background: rgba(0,0,0,.045);
}

.delta-library-services-grid span {
    margin-bottom: auto;
    font-size: 9px;
    letter-spacing: .15em;
    opacity: .45;
}

.delta-library-services-grid h3 {
    margin: 45px 0 8px;
    font-size: 20px;
    letter-spacing: -.025em;
}

.delta-library-services-grid small {
    display: block;
    margin-bottom: 22px;
    font-size: 11px;
    opacity: .55;
}

.delta-library-services-grid strong {
    font-size: 8px;
    letter-spacing: .14em;
}

@media (max-width: 900px) {
    .delta-library-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .delta-library-services {
        padding-left: 20px;
        padding-right: 20px;
    }

    .delta-library-services-grid {
        grid-template-columns: 1fr;
    }
}