/* =========================================
   01. VARIABLES
========================================= */

:root {
    --direction-white: #FFFFFF;
    --direction-black: #161513;
    --direction-gold: #EAA736;

    --direction-cream: var(--color-bone);
    --direction-soft: var(--color-bone);
    --direction-text: #242321;
    --direction-gray: #77736D;
    --direction-border: rgba(22, 21, 19, 0.14);

    --direction-ease:
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================
   02. BASE
========================================= */

.direction-page {
    margin: 0;
    overflow-x: hidden;

    background-color:
        var(--direction-white);

    color:
        var(--direction-text);
}


.direction-container {
    width:
        min(1240px, 88%);

    margin:
        0 auto;
}


/* =========================================
   03. ENTRADA
========================================= */

.direction-page main,
.direction-page .footer {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 0.8s ease,
        transform 0.8s
        var(--direction-ease);
}


.direction-page.is-loading main,
.direction-page.is-loading .footer {
    opacity: 0;

    transform:
        translateY(16px);
}


/* =========================================
   04. REVEAL
========================================= */

.reveal-block {
    opacity: 0;

    transform:
        translateY(34px);

    transition:
        opacity 0.85s ease,
        transform 0.85s
        var(--direction-ease);
}


.reveal-block.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.reveal-mask {
    position: relative;

    overflow: hidden;
}


.reveal-mask::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    background-color:
        var(--direction-cream);

    transform:
        translateX(0);

    transition:
        transform 1.1s
        var(--direction-ease);
}


.reveal-mask.is-visible::after {
    transform:
        translateX(101%);
}


/* =========================================
   05. HERO / PRESENTACIÓN
========================================= */

.ld-hero {
    width: 100%;

    min-height:
        clamp(500px, 67svh, 640px);

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    padding:
        64px
        7vw
        54px;

    isolation: isolate;

    background-color:
        #161513;
}


/* =========================================
   CARRUSEL DE IMÁGENES
========================================= */

.ld-hero__slider {
    position: absolute;

    inset: 0;

    z-index: -3;

    overflow: hidden;

    background-color:
        #161513;
}


.ld-hero__slide {
    margin: 0;

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.035);

    transition:
        opacity 1.1s ease,
        visibility 1.1s ease,
        transform 7s ease;
}


.ld-hero__slide.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        scale(1.085);
}


.ld-hero__slide img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center 40%;
}


/* Oscurecimiento solo detrás de la información */

.ld-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(22, 21, 19, 0.74) 0%,
            rgba(22, 21, 19, 0.54) 27%,
            rgba(22, 21, 19, 0.20) 52%,
            rgba(22, 21, 19, 0.02) 78%
        );
}


/* =========================================
   INFORMACIÓN
========================================= */

.ld-hero__content {
    width:
        min(520px, 48%);

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.ld-hero__eyebrow {
    margin:
        0
        0
        11px;

    position: relative;

    color:
        #FFFFFF;

    font-size: 8px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.ld-hero__eyebrow::after {
    content: "";

    width: 40px;

    height: 2px;

    margin-top: 11px;

    display: block;

    background-color:
        var(--direction-gold);
}


/* Título más pequeño y compacto */

.ld-hero__title {
    margin:
        0
        0
        14px;

    display: flex;

    flex-direction: column;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(49px, 5.3vw, 76px);

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -3px;

    color:
        #FFFFFF;
}


.ld-hero__title span {
    display: block;
}


.ld-hero__title span + span {
    margin-top: 3px;
}


.ld-hero__subtitle {
    max-width: 480px;

    margin:
        4px
        0
        13px;

    color:
        #FFFFFF;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(19px, 2vw, 29px);

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -0.8px;

    text-transform: uppercase;
}


.ld-hero__text {
    max-width: 455px;

    margin:
        0
        0
        23px;

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

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================
   BOTONES
========================================= */

.ld-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
}


.ld-btn {
    min-width: 164px;

    height: 42px;

    padding:
        0
        20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.80);

    font-size: 7px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 1.5px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ld-btn--solid {
    border-color:
        #FFFFFF;

    background-color:
        #FFFFFF;

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


.ld-btn--outline {
    background-color:
        transparent;

    color:
        #FFFFFF;
}


.ld-btn:hover {
    border-color:
        var(--direction-gold);

    background-color:
        var(--direction-gold);

    color:
        var(--direction-black);

    transform:
        translateY(-2px);
}


/* =========================================
   INDICADORES DE LAS TRES IMÁGENES
========================================= */

.ld-hero__pagination {
    position: absolute;

    left: 7vw;

    bottom: 20px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 8px;
}


.ld-hero__dot {
    width: 22px;

    height: 2px;

    padding: 0;

    border: 0;

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

    cursor: pointer;

    transition:
        width 0.35s ease,
        background-color 0.35s ease;
}


.ld-hero__dot:hover {
    background-color:
        rgba(255, 255, 255, 0.80);
}


.ld-hero__dot.is-active {
    width: 42px;

    background-color:
        var(--direction-gold);
}


/* Palabra decorativa */

.ld-hero__word {
    margin: 0;

    position: absolute;

    right: 2%;

    bottom: -17px;

    z-index: 1;

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

    font-size:
        clamp(75px, 13vw, 190px);

    font-weight: 800;

    line-height: 0.78;

    letter-spacing: -7px;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;
}


/* =========================================
   HERO — TABLET
========================================= */

@media (max-width: 1024px) {

    .ld-hero {
        min-height:
            clamp(500px, 66svh, 610px);

        padding:
            62px
            6vw
            52px;
    }


    .ld-hero__slide img {
        object-position:
            62% center;
    }


    .ld-hero__content {
        width:
            min(500px, 55%);
    }


    .ld-hero__title {
        font-size:
            clamp(46px, 6.5vw, 67px);
    }


    .ld-hero__subtitle {
        max-width: 440px;

        font-size:
            clamp(18px, 2.6vw, 25px);
    }


    .ld-hero__text {
        max-width: 420px;
    }


    .ld-hero__pagination {
        left: 6vw;
    }


    .ld-hero__word {
        font-size:
            clamp(70px, 14vw, 145px);
    }

}


/* =========================================
   HERO — MÓVIL
========================================= */

@media (max-width: 700px) {

    .ld-hero {
        min-height: 560px;

        padding:
            70px
            18px
            47px;

        align-items: flex-end;
    }


    .ld-hero__slide img {
        object-position:
            67% center;
    }


    .ld-hero__overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(22, 21, 19, 0.05) 0%,
                rgba(22, 21, 19, 0.25) 34%,
                rgba(22, 21, 19, 0.84) 100%
            );
    }


    .ld-hero__content {
        width: 100%;

        max-width: 480px;
    }


    .ld-hero__eyebrow {
        margin-bottom: 9px;

        font-size: 7px;

        letter-spacing: 2px;
    }


    .ld-hero__eyebrow::after {
        width: 34px;

        margin-top: 9px;
    }


    .ld-hero__title {
        margin-bottom: 12px;

        font-size:
            clamp(44px, 14vw, 62px);

        line-height: 0.80;

        letter-spacing: -2px;
    }


    .ld-hero__subtitle {
        max-width: 390px;

        margin-bottom: 12px;

        font-size:
            clamp(17px, 5.5vw, 23px);

        line-height: 1.05;
    }


    .ld-hero__text {
        max-width: 390px;

        margin-bottom: 20px;

        font-size: 10px;

        line-height: 1.55;
    }


    .ld-hero__actions {
        width: 100%;

        gap: 8px;
    }


    .ld-btn {
        width:
            calc(50% - 4px);

        min-width: 0;

        height: 40px;

        padding:
            0
            10px;

        font-size: 6.5px;

        letter-spacing: 1.2px;
    }


    .ld-hero__pagination {
        left: 18px;

        bottom: 17px;
    }


    .ld-hero__dot {
        width: 18px;
    }


    .ld-hero__dot.is-active {
        width: 32px;
    }


    .ld-hero__word {
        display: none;
    }

}


/* =========================================
   HERO — TELÉFONOS PEQUEÑOS
========================================= */

@media (max-width: 420px) {

    .ld-hero {
        min-height: 530px;

        padding:
            65px
            15px
            45px;
    }


    .ld-hero__title {
        font-size:
            clamp(41px, 13vw, 54px);
    }


    .ld-hero__subtitle {
        font-size:
            clamp(16px, 5.2vw, 20px);
    }


    .ld-hero__actions {
        flex-direction: column;
    }


    .ld-btn {
        width: 100%;
    }


    .ld-hero__pagination {
        left: 15px;
    }

}


/* =========================================
   HERO EDITORIAL / DIRECCIÓN CREATIVA
========================================= */

.ld-hero {
    height:
        clamp(
            560px,
            calc(
                100svh -
                var(--header-height)
            ),
            880px
        );

    min-height:
        560px;

    padding:
        clamp(76px, 8vw, 120px)
        7vw
        76px;

    align-items:
        center;

    background-color:
        #161513;
}


.ld-hero__slider {
    background-color:
        #161513;
}


.ld-hero__slide img {
    object-position:
        center 38%;

    filter:
        saturate(0.92)
        contrast(1.04);
}


.ld-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(22, 21, 19, 0.94) 0%,
            rgba(22, 21, 19, 0.82) 27%,
            rgba(22, 21, 19, 0.42) 56%,
            rgba(22, 21, 19, 0.10) 100%
        ),
        linear-gradient(
            0deg,
            rgba(22, 21, 19, 0.58) 0%,
            rgba(22, 21, 19, 0) 48%
        );
}


.ld-hero__content {
    width:
        min(680px, 55%);

    padding-left:
        clamp(16px, 1.5vw, 24px);

    border-left:
        1px solid
        rgba(234, 167, 54, 0.74);
}


.ld-hero__eyebrow {
    margin-bottom:
        clamp(16px, 1.6vw, 24px);

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

    font-size:
        clamp(7px, 0.5vw, 9px);

    letter-spacing:
        0.24em;
}


.ld-hero__eyebrow::after {
    width:
        52px;

    height:
        2px;

    margin-top:
        12px;
}


.ld-hero__title {
    margin:
        0
        0
        clamp(17px, 1.7vw, 26px);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(58px, 7.2vw, 126px);

    font-weight:
        900;

    letter-spacing:
        -0.075em;

    line-height:
        0.76;

    text-transform:
        uppercase;
}


.ld-hero__title span:first-child {
    margin:
        0
        0
        0.38em;

    color:
        #EAA736;

    font-size:
        0.2em;

    font-weight:
        800;

    letter-spacing:
        0.22em;

    line-height:
        1;
}


.ld-hero__title span + span {
    margin-top:
        0;
}


.ld-hero__title span:last-child::after {
    content:
        ".";

    color:
        #EAA736;
}


.ld-hero__subtitle {
    max-width:
        560px;

    margin:
        0
        0
        13px;

    font-size:
        clamp(16px, 1.45vw, 24px);

    font-weight:
        800;

    letter-spacing:
        -0.035em;

    line-height:
        1.05;
}


.ld-hero__subtitle span {
    color:
        #EAA736;
}


.ld-hero__text {
    max-width:
        500px;

    margin-bottom:
        25px;

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

    font-size:
        clamp(10px, 0.72vw, 12px);
}


.ld-btn {
    min-width:
        176px;

    height:
        45px;

    border-color:
        rgba(255, 255, 255, 0.62);

    font-size:
        7px;

    letter-spacing:
        0.18em;
}


.ld-btn--solid {
    border-color:
        #EAA736;

    background-color:
        #EAA736;

    color:
        #161513;
}


.ld-btn--outline {
    background-color:
        rgba(22, 21, 19, 0.16);
}


.ld-hero__pagination {
    left:
        7vw;

    bottom:
        27px;

    gap:
        7px;
}


.ld-hero__counter {
    min-width:
        48px;

    margin-right:
        7px;

    color:
        #FFFFFF;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.18em;
}


.ld-hero__dot {
    width:
        24px;

    height:
        2px;

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


.ld-hero__dot.is-active {
    width:
        48px;
}


.ld-hero__word {
    right:
        2.5%;

    bottom:
        -0.08em;

    color:
        transparent;

    font-size:
        clamp(105px, 15vw, 250px);

    letter-spacing:
        -0.08em;

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


@media (max-width: 1024px) {

    .ld-hero {
        padding:
            76px
            6vw
            72px;
    }


    .ld-hero__content {
        width:
            min(620px, 62%);
    }


    .ld-hero__title {
        font-size:
            clamp(56px, 8.5vw, 88px);
    }


    .ld-hero__pagination {
        left:
            6vw;
    }

}


@media (max-width: 700px) {

    .ld-hero {
        height:
            clamp(
                610px,
                calc(
                    100svh -
                    var(--header-height)
                ),
                760px
            );

        min-height:
            610px;

        padding:
            94px
            20px
            78px;

        align-items:
            flex-end;
    }


    .ld-hero__slide img {
        object-position:
            62% center;
    }


    .ld-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(22, 21, 19, 0.96) 0%,
                rgba(22, 21, 19, 0.73) 43%,
                rgba(22, 21, 19, 0.18) 100%
            );
    }


    .ld-hero__content {
        width:
            100%;

        max-width:
            520px;

        padding-left:
            14px;
    }


    .ld-hero__eyebrow {
        margin-bottom:
            14px;
    }


    .ld-hero__title {
        margin-bottom:
            16px;

        font-size:
            clamp(48px, 15vw, 72px);

        letter-spacing:
            -0.065em;
    }


    .ld-hero__title span:first-child {
        font-size:
            0.23em;
    }


    .ld-hero__subtitle {
        max-width:
            360px;

        font-size:
            clamp(15px, 4.6vw, 20px);
    }


    .ld-hero__text {
        max-width:
            360px;

        margin-bottom:
            20px;

        font-size:
            10px;
    }


    .ld-btn {
        height:
            41px;
    }


    .ld-hero__pagination {
        left:
            20px;

        bottom:
            24px;
    }


    .ld-hero__word {
        display:
            none;
    }

}


@media (max-width: 420px) {

    .ld-hero {
        min-height:
            590px;

        padding:
            88px
            16px
            74px;
    }


    .ld-hero__title {
        font-size:
            clamp(45px, 14vw, 58px);
    }


    .ld-hero__actions {
        flex-direction:
            column;
    }


    .ld-btn {
        width:
            100%;
    }


    .ld-hero__pagination {
        left:
            16px;
    }

}


/* ESCALA DE REFERENCIA: RETRATOS */

.ld-hero__content {
    width: min(760px, 58%);
}

.ld-hero__eyebrow {
    margin-bottom: clamp(12px, 1.2vw, 18px);
    font-size: 8px;
    letter-spacing: 2px;
}

.ld-hero__eyebrow::after {
    width: 40px;
    height: 1px;
    margin-top: 10px;
}

.ld-hero__title {
    margin-bottom: clamp(15px, 1.5vw, 22px);
    font-size: clamp(66px, 10.2vw, 156px);
    line-height: 0.78;
    letter-spacing: -0.045em;
}

.ld-hero__title span:first-child {
    margin-bottom: 0.34em;
    font-size: 0.2em;
    letter-spacing: 0.2em;
}

.ld-hero__subtitle {
    max-width: 520px;
    margin-bottom: 13px;
    font-size: clamp(24px, 3.3vw, 54px);
    line-height: 0.94;
    letter-spacing: -0.035em;
}

.ld-hero__text {
    max-width: 520px;
    margin-bottom: 26px;
    font-size: 11px;
    line-height: 1.72;
}

.ld-hero__actions {
    gap: 12px;
}

.ld-btn {
    min-width: 210px;
    height: 46px;
    padding: 0 17px;
    font-size: 7px;
    letter-spacing: 1.4px;
}

.ld-hero__counter {
    min-width: 48px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.ld-hero__word {
    font-size: clamp(105px, 15vw, 250px);
    letter-spacing: -0.08em;
}


@media (max-width: 1024px) {

    .ld-hero__content {
        width: min(680px, 65%);
    }

    .ld-hero__title {
        font-size: clamp(60px, 10vw, 110px);
    }

    .ld-hero__subtitle {
        font-size: clamp(22px, 3.8vw, 42px);
    }

}


@media (max-width: 700px) {

    .ld-hero__content {
        width: 100%;
        max-width: 520px;
    }

    .ld-hero__eyebrow {
        margin-bottom: 16px;
        font-size: 7px;
        letter-spacing: 1.4px;
    }

    .ld-hero__title {
        margin-bottom: 18px;
        font-size: clamp(50px, 18vw, 76px);
        letter-spacing: -3.8px;
    }

    .ld-hero__title span:first-child {
        font-size: 0.23em;
    }

    .ld-hero__subtitle {
        max-width: 420px;
        font-size: clamp(24px, 8.5vw, 36px);
    }

    .ld-hero__text {
        max-width: 92%;
        margin-bottom: 22px;
        font-size: 10px;
    }

    .ld-btn {
        min-width: 210px;
        height: 46px;
        font-size: 7px;
    }

}


@media (max-width: 420px) {

    .ld-hero__title {
        font-size: clamp(50px, 18vw, 68px);
    }

    .ld-hero__subtitle {
        font-size: clamp(22px, 8vw, 32px);
    }

}


/* =========================================
   06. NUESTRA MIRADA
========================================= */

.direction-look {
    width: 100%;

    padding:
        58px
        0
        62px;

    overflow: hidden;

    background-color:
        #FFFFFF;

    color:
        #161513;
}


/* =========================================
   ENCABEZADO
========================================= */

.direction-look-heading {
    width:
        min(820px, 88%);

    margin:
        0 auto
        32px;

    text-align: center;
}


.direction-look-eyebrow {
    margin:
        0
        0
        11px;

    color:
        #EAA736;

    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.direction-look-heading h2 {
    margin:
        0
        0
        11px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(38px, 4.5vw, 62px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -2px;

    color:
        #161513;
}


.direction-look-description {
    margin: 0;

    color:
        rgba(22, 21, 19, 0.68);

    font-size:
        clamp(11px, 1vw, 14px);

    line-height: 1.6;

    letter-spacing: 0.2px;
}


/* =========================================
   GALERÍA GENERAL
========================================= */

.direction-look-gallery {
    width: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-bottom: 64px;
}


.direction-look-track {
    width:
        min(1180px, 78%);

    display: grid;

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

    gap: 6px;

    transition:
        opacity 0.35s ease,
        transform 0.55s
        var(--direction-ease);
}


.direction-look-track.is-changing {
    opacity: 0;

    transform:
        translateY(10px);
}


/* =========================================
   TARJETAS
========================================= */

.direction-look-card {
    height:
        clamp(390px, 39vw, 525px);

    position: relative;

    overflow: hidden;

    background-color:
        #161513;

    cursor: pointer;

    outline: none;
}


.direction-look-card img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        grayscale(72%)
        saturate(0.72)
        contrast(1.03);

    transform:
        scale(1.01);

    transition:
        transform 0.85s
        var(--direction-ease),
        filter 0.55s ease;
}


.direction-look-card--grayscale img {
    filter:
        grayscale(72%)
        saturate(0.72)
        contrast(1.03);
}


/* Acercamiento al pasar el mouse */

.direction-look-card:hover img,
.direction-look-card:focus-visible img,
.direction-look-card.is-active img {
    filter:
        grayscale(0%)
        saturate(1.04)
        contrast(1.02);

    transform:
        scale(1.055);
}


/* =========================================
   OSCURECIMIENTO
========================================= */

.direction-look-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(22, 21, 19, 0.25) 0%,
            rgba(22, 21, 19, 0.82) 100%
        );

    opacity: 0;

    transition:
        opacity 0.5s ease;
}

.direction-look-card:hover
.direction-look-shade,
.direction-look-card:focus-visible
.direction-look-shade,
.direction-look-card.is-active
.direction-look-shade {
    opacity: 1;
}


/* =========================================
   CONTENIDO SOBRE LA IMAGEN
========================================= */

.direction-look-card-content {
    position: absolute;

    inset: 0;

    z-index: 2;

    padding:
        35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 22px;

    color:
        #FFFFFF;

    text-align: center;

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        opacity 0.45s ease,
        transform 0.55s
        var(--direction-ease);
}


.direction-look-card:hover
.direction-look-card-content,
.direction-look-card:focus-visible
.direction-look-card-content,
.direction-look-card.is-active
.direction-look-card-content {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   SÍMBOLO +
========================================= */

.direction-look-plus {
    width: 32px;

    height: 32px;

    position: relative;

    display: block;

    margin-bottom: 4px;

    transform:
        rotate(-90deg)
        scale(0.7);

    transition:
        transform 0.6s
        var(--direction-ease);
}

.direction-look-plus::before,
.direction-look-plus::after {
    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    background-color:
        #FFFFFF;

    transform:
        translate(-50%, -50%);
}


.direction-look-plus::before {
    width: 32px;

    height: 1px;
}


.direction-look-plus::after {
    width: 1px;

    height: 32px;
}


.direction-look-card:hover
.direction-look-plus,
.direction-look-card:focus-visible
.direction-look-plus,
.direction-look-card.is-active
.direction-look-plus {
    transform:
        rotate(0deg)
        scale(1);
}

/* =========================================
   TÍTULO DE CADA CONCEPTO
========================================= */

.direction-look-card-title {
    width:
        min(340px, 84%);

    position: relative;

    left: auto;

    bottom: auto;

    text-align: center;

    transform: none;
}


.direction-look-card-title h3 {
    margin:
        0
        0
        12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(24px, 2.25vw, 34px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    color:
        #FFFFFF;

    transition:
        color 0.35s ease;
}


.direction-look-card:hover
.direction-look-card-title h3,
.direction-look-card:focus-visible
.direction-look-card-title h3,
.direction-look-card.is-active
.direction-look-card-title h3 {
    color:
        #EAA736;
}

.direction-look-card-title > span {
    width: 36px;

    height: 2px;

    display: block;

    margin:
        0 auto
        13px;

    background-color:
        #EAA736;

    transform:
        scaleX(0);

    transition:
        transform 0.55s
        var(--direction-ease)
        0.1s;
}


.direction-look-card-title p {
    margin: 0;

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

    font-size:
        clamp(10px, 0.9vw, 12px);

    font-style: italic;

    line-height: 1.5;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.45s ease 0.12s,
        transform 0.45s
        var(--direction-ease)
        0.12s;
}

.direction-look-card:hover
.direction-look-card-title p,
.direction-look-card:focus-visible
.direction-look-card-title p,
.direction-look-card.is-active
.direction-look-card-title p {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   ANIMACIÓN DE ENTRADA DE LAS TARJETAS
========================================= */

.reveal-look-card {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.85s ease,
        transform 0.85s
        var(--direction-ease);
}


.reveal-look-card.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.reveal-look-card:nth-child(2) {
    transition-delay: 100ms;
}


.reveal-look-card:nth-child(3) {
    transition-delay: 200ms;
}


/* =========================================
   FLECHAS LATERALES
========================================= */

.direction-look-arrow {
    width: 44px;

    height: 44px;

    padding: 0;

    position: absolute;

    top: auto;

    bottom: 0;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        #161513;

    border-radius: 50%;

    background-color:
        #161513;

    color:
        #FFFFFF;

    font-size: 17px;

    line-height: 1;

    cursor: pointer;

    transform: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.direction-look-arrow:hover {
    border-color:
        #EAA736;

    background-color:
        #EAA736;

    color:
        #161513;

    transform:
        scale(1.06);
}


.direction-look-arrow--previous {
    left:
        calc(50% - 52px);
}


.direction-look-arrow--next {
    right:
        calc(50% - 52px);
}


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

@media (max-width: 1050px) {

    .direction-look {
        padding:
            52px
            0
            58px;
    }


    .direction-look-heading {
        margin-bottom: 28px;
    }


    .direction-look-track {
        width: 84%;

        gap: 5px;
    }


    .direction-look-card {
        height:
            clamp(380px, 51vw, 490px);
    }


    .direction-look-arrow {
    width: 44px;

    height: 44px;
}

}


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

@media (max-width: 700px) {

    .direction-look {
        padding:
            48px
            0
            54px;
    }


    .direction-look-heading {
        width: 88%;

        margin-bottom: 25px;
    }


    .direction-look-heading h2 {
        font-size:
            clamp(38px, 12vw, 54px);

        letter-spacing: -1.5px;
    }


    .direction-look-description {
        max-width: 320px;

        margin:
            0 auto;
    }

    .direction-look-gallery {
    width: 100%;

    display: block;

    overflow: hidden;

    padding-bottom: 68px;
    }


    .direction-look-track {
        width: 100%;

        display: flex;

        grid-template-columns: none;

        justify-content: flex-start;

        gap: 10px;

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

        scroll-snap-type: x mandatory;

        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    .direction-look-card {
        width: 82vw;

        min-width: 82vw;

        flex:
            0 0 82vw;

        height:
            min(510px, 112vw);

        scroll-snap-align:
            center;

        scroll-snap-stop:
            always;
    }


    .direction-look-track::-webkit-scrollbar {
        display: none;
    }


    .direction-look-card:first-child {
        margin-left: 9vw;
    }


    .direction-look-card:last-child {
        margin-right: 9vw;
    }


    .direction-look-shade {
        opacity: 0.12;
    }


    .direction-look-card.is-active
    .direction-look-shade {
        opacity: 1;
    }


    .direction-look-arrow {
        width: 46px;

        height: 46px;

        top: auto;

        bottom: 0;

        transform: none;
    }


    .direction-look-arrow:hover {
        transform:
            scale(1.04);
    }


    .direction-look-arrow--previous {
        left:
            calc(50% - 55px);
    }


    .direction-look-arrow--next {
        right:
            calc(50% - 55px);
    }
    
}


/* =========================================
   TELÉFONOS PEQUEÑOS
========================================= */

@media (max-width: 390px) {

    .direction-look-card {
        min-width: 86vw;

        height: 520px;
    }


    .direction-look-card:first-child {
        margin-left: 7vw;
    }


    .direction-look-card:last-child {
        margin-right: 7vw;
    }

}

/* =========================================
   07. CÓMO TRABAJAMOS JUNTOS
========================================= */

.direction-workflow {
    width: 100%;

    padding:
        66px
        0
        70px;

    overflow: hidden;

    background-color:
        #161513;

    color:
        #FFFFFF;
}


.direction-workflow__container {
    width:
        min(1240px, 88%);

    margin:
        0 auto;
}


/* =========================================
   ENCABEZADO
========================================= */

.direction-workflow__heading {
    max-width: 700px;

    margin-bottom: 34px;
}


.direction-workflow__eyebrow {
    margin:
        0
        0
        12px;

    color:
        #EAA736;

    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 2.3px;

    text-transform: uppercase;
}


.direction-workflow__heading h2 {
    margin: 0;

    color:
        #FFFFFF;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(39px, 4.6vw, 62px);

    font-weight: 400;

    line-height: 0.96;

    letter-spacing: -2px;
}


.direction-workflow__heading h2 span {
    display: block;
}


/* =========================================
   NAVEGACIÓN
========================================= */

.direction-workflow__navigation {
    display: grid;

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

    margin-bottom: 18px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.16);
}


.direction-workflow__tab {
    min-width: 0;

    padding:
        13px
        8px
        15px;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    border: 0;

    background-color:
        transparent;

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

    text-align: left;

    cursor: pointer;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.direction-workflow__tab span {
    color:
        rgba(234, 167, 54, 0.65);

    font-size: 7px;

    line-height: 1;
}


.direction-workflow__tab strong {
    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.direction-workflow__tab::after {
    content: "";

    width: 0;

    height: 2px;

    position: absolute;

    left: 8px;

    bottom: -1px;

    background-color:
        #EAA736;

    transition:
        width 0.4s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.direction-workflow__tab:hover {
    color:
        rgba(255, 255, 255, 0.82);
}


.direction-workflow__tab.is-active {
    color:
        #FFFFFF;
}


.direction-workflow__tab.is-active span {
    color:
        #EAA736;
}


.direction-workflow__tab.is-active::after {
    width:
        calc(100% - 16px);
}


/* =========================================
   ESCENARIO GENERAL
========================================= */

.direction-workflow__stage {
    width: 100%;

    height: 410px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(245px, 0.72fr)
        minmax(0, 0.95fr);

    overflow: hidden;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);

    background-color:
        #161513;
}


/* =========================================
   IMAGEN DINÁMICA
========================================= */

.direction-workflow__media {
    height: 410px;

    position: relative;

    overflow: hidden;

    background-color:
        #252421;
}


.direction-workflow__media img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        opacity 0.38s ease,
        transform 0.65s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.direction-workflow__media img.is-changing {
    opacity: 0;

    transform:
        scale(1.045);
}


.direction-workflow__media-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(22, 21, 19, 0.03) 35%,
            rgba(22, 21, 19, 0.62) 100%
        );

    pointer-events: none;
}


.direction-workflow__image-number {
    position: absolute;

    left: 18px;

    bottom: 16px;

    color:
        #EAA736;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.direction-workflow__media-label {
    margin: 0;

    position: absolute;

    right: 18px;

    bottom: 16px;

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* =========================================
   DECLARACIÓN CENTRAL
========================================= */

.direction-workflow__manifesto {
    height: 410px;

    position: relative;

    overflow: hidden;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-right:
        1px solid
        rgba(255, 255, 255, 0.12);

    background-color:
        #11110F;
}


.direction-workflow__manifesto > img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        grayscale(100%)
        brightness(0.34);

    transform:
        scale(1.04);
}


.direction-workflow__manifesto-shade {
    position: absolute;

    inset: 0;

    background:
        rgba(22, 21, 19, 0.55);
}


.direction-workflow__manifesto-content {
    position: absolute;

    inset:
        28px
        25px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.direction-workflow__manifesto-content > p {
    margin:
        0
        0
        18px;

    color:
        #EAA736;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.direction-workflow__manifesto-content blockquote {
    margin:
        0
        0
        21px;

    color:
        #FFFFFF;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(23px, 2.3vw, 33px);

    font-weight: 400;

    line-height: 1.12;
}


.direction-workflow__manifesto-content > span {
    color:
        rgba(255, 255, 255, 0.52);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* =========================================
   INFORMACIÓN DINÁMICA
========================================= */

.direction-workflow__information {
    height: 410px;

    padding:
        42px
        9%;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background-color:
        #161513;

    transition:
        opacity 0.25s ease,
        transform 0.35s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.direction-workflow__information.is-changing {
    opacity: 0;

    transform:
        translateY(8px);
}


.direction-workflow__step {
    margin:
        0
        0
        14px;

    color:
        #EAA736;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.direction-workflow__information h3 {
    margin:
        0
        0
        17px;

    color:
        #FFFFFF;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 3.5vw, 50px);

    font-weight: 400;

    line-height: 1;
}


.direction-workflow__description {
    max-width: 370px;

    margin:
        0
        0
        24px;

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

    font-size: 11px;

    line-height: 1.75;
}


.direction-workflow__keywords {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.direction-workflow__keywords span {
    padding:
        7px
        9px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.direction-workflow__keywords span:first-child {
    border-color:
        rgba(234, 167, 54, 0.62);

    color:
        #EAA736;
}


.direction-workflow__counter {
    position: absolute;

    right: 22px;

    bottom: 17px;

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

    font-size: 7px;

    letter-spacing: 1.3px;
}


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

@media (max-width: 1050px) {

    .direction-workflow {
        padding:
            58px
            0
            62px;
    }


    .direction-workflow__stage {
        height: auto;

        grid-template-columns:
            1fr
            1fr;
    }


    .direction-workflow__media {
        grid-column:
            1 / -1;

        height: 430px;
    }


    .direction-workflow__manifesto,
    .direction-workflow__information {
        height: 350px;
    }

}


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

@media (max-width: 700px) {

    .direction-workflow {
        padding:
            48px
            0
            52px;
    }


    .direction-workflow__container {
        width: 90%;
    }


    .direction-workflow__heading {
        margin-bottom: 26px;
    }


    .direction-workflow__heading h2 {
        font-size:
            clamp(38px, 11vw, 52px);
    }


    .direction-workflow__navigation {
        display: flex;

        overflow-x: auto;

        scrollbar-width: none;

        scroll-snap-type:
            x proximity;
    }


    .direction-workflow__navigation::-webkit-scrollbar {
        display: none;
    }


    .direction-workflow__tab {
        min-width: 135px;

        scroll-snap-align: start;
    }


    .direction-workflow__stage {
        display: flex;

        flex-direction: column;
    }


    .direction-workflow__media {
        width: 100%;

        height: auto;

        aspect-ratio:
            4 / 3;
    }


    .direction-workflow__manifesto {
        width: 100%;

        height: 300px;

        border:
            1px solid
            rgba(255, 255, 255, 0.12);
    }


    .direction-workflow__information {
        width: 100%;

        height: auto;

        min-height: 320px;

        padding:
            46px
            7%;
    }


    .direction-workflow__manifesto-content blockquote {
        max-width: 310px;

        font-size:
            clamp(25px, 7.5vw, 34px);
    }


    .direction-workflow__information h3 {
        font-size:
            clamp(36px, 10vw, 48px);
    }

}


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

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

    .direction-workflow__media img,
    .direction-workflow__information {
        transition: none;

        transform: none;
    }

}


/* =========================================
   08. CÓMO DIRIGIMOS
========================================= */

.direction-method {
    width: 100%;

    padding:
        28px
        0
        32px;

    overflow: hidden;

    background-color:
        #FFFFFF;

    color:
        #161513;
}


.direction-method__container {
    width:
        min(1320px, 88%);

    margin:
        0 auto;
}


/* =========================================
   ENCABEZADO COMPACTO
========================================= */

.direction-method__heading {
    max-width: 720px;

    margin-bottom: 18px;
}


.direction-method__eyebrow {
    margin:
        0
        0
        7px;

    color:
        #EAA736;

    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.direction-method__heading h2 {
    margin:
        0
        0
        7px;

    color:
        #161513;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(43px, 5vw, 68px);

    font-weight: 400;

    line-height: 0.96;

    letter-spacing: -2px;
}


.direction-method__intro {
    max-width: 520px;

    margin: 0;

    color:
        rgba(22, 21, 19, 0.64);

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================
   ESCENARIO VISUAL
========================================= */

.direction-method__stage {
    width: 100%;

    height:
        clamp(460px, 55vw, 620px);

    position: relative;

    overflow: hidden;

    background-color:
        #161513;
}


/* Imagen completa */

.direction-method__media {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.direction-method__media img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.015);

    transition:
        opacity 0.45s ease,
        transform 0.9s
        var(--direction-ease);
}


.direction-method__media img.is-changing {
    opacity: 0;

    transform:
        scale(1.055);
}


/* Oscurecimiento: izquierda y derecha */

.direction-method__shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(22, 21, 19, 0.88) 0%,
            rgba(22, 21, 19, 0.60) 25%,
            rgba(22, 21, 19, 0.08) 54%,
            rgba(22, 21, 19, 0.35) 75%,
            rgba(22, 21, 19, 0.82) 100%
        );

    pointer-events: none;
}


/* =========================================
   INFORMACIÓN IZQUIERDA
========================================= */

.direction-method__content {
    width:
        min(420px, 37%);

    position: absolute;

    left: 4.5%;

    bottom: 10%;

    z-index: 3;

    color:
        #FFFFFF;

    transition:
        opacity 0.3s ease,
        transform 0.45s
        var(--direction-ease);
}


.direction-method__content.is-changing {
    opacity: 0;

    transform:
        translateY(12px);
}


.direction-method__title-row {
    margin-bottom: 15px;

    display: flex;

    align-items: center;

    gap: 16px;
}


.direction-method__number {
    color:
        #EAA736;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5.5vw, 73px);

    font-weight: 400;

    line-height: 0.8;
}


.direction-method__line {
    width: 58px;

    height: 2px;

    display: block;

    background-color:
        #EAA736;
}


.direction-method__content h3 {
    margin:
        0
        0
        19px;

    color:
        #FFFFFF;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 68px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -2px;
}


.direction-method__statement {
    margin:
        0
        0
        7px;

    color:
        #FFFFFF;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;
}


.direction-method__description {
    max-width: 360px;

    margin: 0;

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

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================
   NAVEGACIÓN VERTICAL DERECHA
========================================= */

.direction-method__navigation {
    width: 245px;

    position: absolute;

    right: 3.5%;

    top: 50%;

    z-index: 4;

    display: flex;

    flex-direction: column;

    transform:
        translateY(-50%);
}


.direction-method__rail {
    width: 1px;

    position: absolute;

    left: 13px;

    top: 27px;

    bottom: 27px;

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


.direction-method__tab {
    width: 100%;

    min-height: 64px;

    padding:
        12px
        4px
        12px
        43px;

    position: relative;

    display: grid;

    grid-template-columns:
        30px
        1fr;

    align-items: center;

    gap: 10px;

    border: 0;

    background-color:
        transparent;

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

    text-align: left;

    cursor: pointer;

    transition:
        color 0.3s ease,
        transform 0.35s
        var(--direction-ease);
}


.direction-method__marker {
    width: 20px;

    height: 20px;

    position: absolute;

    left: 3px;

    top: 50%;

    z-index: 2;

    border:
        1px solid
        rgba(255, 255, 255, 0.66);

    border-radius: 50%;

    background-color:
        rgba(22, 21, 19, 0.72);

    transform:
        translateY(-50%);

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


.direction-method__tab-number {
    color:
        inherit;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
}


.direction-method__tab strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    font-weight: 400;
}


.direction-method__tab:hover {
    color:
        rgba(255, 255, 255, 0.86);

    transform:
        translateX(4px);
}


.direction-method__tab.is-active {
    color:
        #FFFFFF;

    transform:
        translateX(6px);
}


.direction-method__tab.is-active
.direction-method__tab-number {
    color:
        #EAA736;
}


.direction-method__tab.is-active
.direction-method__marker {
    border-color:
        #EAA736;

    background-color:
        #EAA736;

    box-shadow:
        0
        0
        0
        5px
        rgba(234, 167, 54, 0.19);

    transform:
        translateY(-50%)
        scale(1.05);
}


/* =========================================
   CONTADOR
========================================= */

.direction-method__counter {
    position: absolute;

    right: 23px;

    bottom: 18px;

    z-index: 4;

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


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

@media (max-width: 1050px) {

    .direction-method {
        padding:
            30px
            0
            34px;
    }


    .direction-method__stage {
        height: 560px;
    }


    .direction-method__content {
        width:
            min(410px, 48%);

        left: 5%;

        bottom: 8%;
    }


    .direction-method__navigation {
        width: 215px;

        right: 2.5%;
    }


    .direction-method__tab {
        min-height: 61px;
    }

}


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

@media (max-width: 700px) {

    .direction-method {
        padding:
            48px
            0
            54px;
    }


    .direction-method__container {
        width: 90%;
    }


    .direction-method__heading {
        margin-bottom: 16px;
    }


    .direction-method__heading h2 {
        font-size:
            clamp(40px, 12vw, 55px);
    }


    .direction-method__stage {
        height: 610px;
    }


    .direction-method__media img {
        object-position:
            55% center;
    }


    .direction-method__shade {
        background:
            linear-gradient(
                to bottom,
                rgba(22, 21, 19, 0.14) 0%,
                rgba(22, 21, 19, 0.20) 30%,
                rgba(22, 21, 19, 0.85) 67%,
                rgba(22, 21, 19, 0.94) 100%
            );
    }


    .direction-method__content {
        width: auto;

        left: 22px;

        right: 22px;

        bottom: 112px;
    }


    .direction-method__number {
        font-size: 47px;
    }


    .direction-method__line {
        width: 42px;
    }


    .direction-method__content h3 {
        margin-bottom: 14px;

        font-size:
            clamp(39px, 12vw, 52px);
    }


    .direction-method__statement {
        font-size: 12px;
    }


    .direction-method__description {
        max-width: 330px;

        font-size: 10px;
    }


    .direction-method__navigation {
        width: auto;

        left: 18px;

        right: 18px;

        top: auto;

        bottom: 20px;

        display: flex;

        flex-direction: row;

        overflow-x: auto;

        transform: none;

        scrollbar-width: none;

        scroll-snap-type:
            x proximity;
    }


    .direction-method__navigation::-webkit-scrollbar {
        display: none;
    }


    .direction-method__rail {
        width: auto;

        height: 1px;

        left: 24px;

        right: 24px;

        top: 12px;

        bottom: auto;
    }


    .direction-method__tab {
        min-width: 125px;

        min-height: 75px;

        padding:
            31px
            8px
            8px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

        scroll-snap-align: start;
    }


    .direction-method__marker {
        left: 7px;

        top: 3px;

        transform: none;
    }


    .direction-method__tab.is-active
    .direction-method__marker {
        transform:
            scale(1.05);
    }


    .direction-method__tab-number {
        font-size: 14px;
    }


    .direction-method__tab strong {
        font-size: 14px;
    }


    .direction-method__tab:hover,
    .direction-method__tab.is-active {
        transform: none;
    }


    .direction-method__counter {
        display: none;
    }

}


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

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

    .direction-method__media img,
    .direction-method__content,
    .direction-method__tab {
        transition: none;

        transform: none;
    }

}

/* =========================================
   09. EXPERIENCIAS
========================================= */

.direction-experiences {
    padding:
        60px
        0
        0;

    background-color:
    var(--color-bone);
}

.direction-experiences-intro {
    width:
        min(1260px, 88%);

    min-height: 220px;

    margin:
        0 auto
        34px;

    padding:
        24px
        0
        22px;

    display: grid;

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

    align-items: stretch;

    column-gap:
        clamp(70px, 10vw, 170px);

    text-align: left;
}


.direction-experiences-intro-left > p {
    margin:
        0
        0
        12px;

    color:
        #EAA736;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.direction-experiences-intro h2 {
    max-width: 540px;

    margin: 0;

    color:
        #161513;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 4vw, 58px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -1.8px;
}


.direction-experiences-intro-right {
    width: 100%;

    max-width: 340px;

    margin-left: auto;

    padding-top: 12px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: flex-end;

    text-align: right;
}


.direction-experiences-intro-right > p {
    max-width: 330px;

    margin:
        0
        0
        auto;

    color:
        rgba(22, 21, 19, 0.70);

    font-size: 11px;

    line-height: 1.55;
}


.direction-experiences-intro a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 24px;

    padding:
        9px
        12px;

    background-color:
        #EAA736;

    color:
        #161513;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.direction-experiences-intro a:hover {
    background-color:
        #161513;

    color:
        #FFFFFF;

    transform:
        translateY(-2px);
}


.direction-experiences-grid {
    display: grid;

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


.direction-experience-panel {
    height:
        clamp(430px, 38vw, 560px);

    position: relative;

    overflow: hidden;

    background-color:
        #161513;
}

.direction-experience-text {
    padding:
        38px
        28px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;

    background-color:
        #ECEDEB;
}


.direction-experience-text > p,
.direction-experience-image-copy > p {
    margin: 0;

    color:
        var(--direction-gold);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.direction-experience-text h3 {
    margin:
        auto
        0
        17px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(28px, 3vw, 42px);

    font-weight: 400;

    line-height: 1.08;
}


.direction-experience-text > span {
    margin-bottom: 35px;

    color:
        var(--direction-gray);

    font-size: 10px;
}


.direction-experience-text a {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.direction-experience-image > a {
    width: 100%;
    height: 100%;

    display: block;

    position: relative;

    color:
        var(--direction-white);
}


.direction-experience-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.85s
        var(--direction-ease);
}


.direction-experience-image:hover img {
    transform:
        scale(1.055);
}


.direction-experience-image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(22, 21, 19, 0.05) 20%,
            rgba(22, 21, 19, 0.28) 55%,
            rgba(22, 21, 19, 0.84) 100%
        );

    transition:
        background 0.45s ease;
}


.direction-experience-image:hover
.direction-experience-image-shade {
    background:
        linear-gradient(
            to bottom,
            rgba(22, 21, 19, 0.15) 10%,
            rgba(22, 21, 19, 0.42) 52%,
            rgba(22, 21, 19, 0.92) 100%
        );
}


.direction-experience-image-copy {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 31px;
}


.direction-experience-image-copy h3 {
    margin:
        14px
        0
        13px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(27px, 3vw, 41px);

    font-weight: 400;

    line-height: 1.06;
}


.direction-experience-image-copy > span {
    display: block;

    margin-bottom: 23px;

    font-size: 10px;
}


.direction-experience-image-copy b {
    font-size: 8px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* =========================================
   10. MARCAS
========================================= */

.direction-clients {
    padding:
        105px
        0;

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


.direction-clients-heading {
    margin-bottom: 55px;

    text-align: center;
}


.direction-clients-heading > p {
    margin:
        0
        0
        15px;

    color:
        var(--direction-gold);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.direction-clients-heading h2 {
    margin:
        0
        0
        15px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(43px, 5.8vw, 75px);

    font-weight: 400;
}


.direction-clients-heading > span {
    color:
        var(--direction-gray);

    font-size: 11px;
}


.direction-clients-grid {
    display: grid;

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

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

    border-left:
        1px solid
        var(--direction-border);
}


.direction-client {
    min-height: 215px;

    position: relative;

    overflow: hidden;

    border-right:
        1px solid
        var(--direction-border);

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

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


.direction-client-name,
.direction-client-info {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    text-align: center;

    transition:
        opacity 0.4s ease,
        transform 0.45s
        var(--direction-ease);
}


.direction-client-name {
    color:
        #8C8984;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.direction-client-info {
    background-color:
        #EDE4D8;

    color:
        var(--direction-black);

    font-size: 9px;

    opacity: 0;

    transform:
        translateY(20px);
}


.direction-client:hover
.direction-client-name {
    opacity: 0;

    transform:
        translateY(-20px);
}


.direction-client:hover
.direction-client-info {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   11. CTA
========================================= */

.direction-cta {
    min-height: 620px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--direction-white);

    text-align: center;
}


.direction-cta-media,
.direction-cta-shade {
    position: absolute;

    inset: 0;
}


.direction-cta-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(1.05);
}


.direction-cta-shade {
    background:
        linear-gradient(
            to bottom,
            rgba(64, 27, 15, 0.25),
            rgba(44, 19, 11, 0.67)
        );
}


.direction-cta-content {
    width:
        min(900px, 88%);

    padding:
        95px
        0;

    position: relative;

    z-index: 2;
}


.direction-cta-content > p {
    margin:
        0
        0
        19px;

    color:
        var(--direction-gold);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.direction-cta h2 {
    margin:
        0
        0
        21px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(49px, 7vw, 92px);

    font-weight: 400;

    line-height: 0.97;
}


.direction-cta-content > span {
    display: block;

    margin-bottom: 33px;

    font-size: 12px;
}


.direction-cta-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;
}


.direction-cta-actions a {
    min-width: 195px;

    padding:
        15px
        22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.72);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.direction-cta-primary {
    background-color:
        var(--direction-white);

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


.direction-cta-secondary {
    color:
        var(--direction-white);
}


.direction-cta-actions a:hover {
    background-color:
        var(--direction-gold);

    border-color:
        var(--direction-gold);

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


/* =========================================
   12. FOOTER
========================================= */

.direction-page .footer {
    background-color:
        var(--direction-black);
}


.direction-page .footer-container {
    width:
        min(1200px, 90%);

    min-height: 74px;

    margin:
        0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.direction-page .footer-logo-image {
    width: auto;
    height: 20px;

    display: block;
}


.direction-page .footer-copy {
    margin: 0;

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

    font-size: 9px;
}


.direction-page .footer-social {
    display: flex;

    align-items: center;

    gap: 22px;
}


.direction-page .footer-social a {
    width: 22px;
    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

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


.direction-page .footer-social svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.direction-page
.footer-social
.tiktok-icon {
    fill: currentColor;
    stroke: none;
}


/* =========================================
   13. WHATSAPP
========================================= */

.floating-whatsapp {
    width: 58px;
    height: 58px;

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 19000;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    background-color:
        var(--direction-black);

    color:
        var(--direction-gold);

    box-shadow:
        0
        12px
        35px
        rgba(0, 0, 0, 0.26);

    opacity: 0;

    transform:
        translateY(18px)
        scale(0.92);

    animation:
        direction-whatsapp-entry
        0.75s
        var(--direction-ease)
        0.8s
        forwards;
}


@keyframes direction-whatsapp-entry {

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


.floating-whatsapp svg {
    width: 34px;
    height: 34px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.floating-whatsapp:hover {
    background-color:
        var(--direction-white);
}


.floating-whatsapp-tooltip {
    min-width: max-content;

    padding:
        8px
        11px;

    position: absolute;

    right:
        calc(100% + 12px);

    background-color:
        var(--direction-black);

    color:
        var(--direction-white);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(7px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


.floating-whatsapp:hover
.floating-whatsapp-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(0);
}


/* =========================================
   15. TABLET
========================================= */

@media (max-width: 1050px) {

    .direction-manifesto-image {
        width: 82%;
    }


    .direction-manifesto-card {
        width: 46%;
    }


    .direction-process-stage {
        grid-template-columns:
            1fr;
    }


    .direction-process-media {
        min-height: 520px;
    }


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


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

}


/* =========================================
   16. MÓVIL
========================================= */

@media (max-width: 700px) {

    .direction-container {
        width: 90%;
    }


    .direction-hero {
        min-height: 720px;
    }


    .direction-hero-content {
        width: 86%;

        margin:
            auto
            7%;

        align-self: flex-end;

        padding-bottom: 80px;
    }


    .direction-hero-color {
        background:
            linear-gradient(
                to bottom,
                rgba(62, 30, 19, 0.06),
                rgba(56, 27, 17, 0.72)
            );
    }


    .direction-hero h1 {
        font-size:
            clamp(53px, 18vw, 85px);

        letter-spacing: -3px;
    }


    .direction-hero-large-word {
        right: 2%;

        font-size:
            clamp(86px, 28vw, 145px);
    }


    .direction-hero-actions {
        flex-direction: column;
    }


    .direction-button {
        width: 100%;
    }


    .direction-manifesto {
        padding:
            80px
            0;
    }


    .direction-manifesto-scene {
        display: flex;

        flex-direction: column;
    }


    .direction-manifesto-image {
        width: 100%;
        height: 480px;
    }


    .direction-manifesto-card {
        width: 90%;

        min-height: auto;

        margin:
            -60px
            auto
            0;

        padding:
            43px
            30px;

        position: relative;

        right: auto;
        top: auto;

        transform: none;
    }

     
    .direction-experiences {
        padding-top: 42px;
    }

    .direction-experiences-intro {
    width: 90%;

    min-height: auto;

    margin:
        0 auto
        28px;

    padding: 0;

    grid-template-columns:
        1fr;

    gap: 22px;
    }


    .direction-experiences-intro-right {
        max-width: 100%;

        margin-left: 0;

        padding-top: 0;

        display: block;

        text-align: left;
    }


    .direction-experiences-intro-right > p {
        max-width: 100%;

        margin-bottom: 18px;
    }


    .direction-experiences-intro a {
        margin-top: 0;
    }


    .direction-experiences-grid {
        grid-template-columns:
            1fr;
    }


    .direction-experience-panel {
        min-height: 470px;
    }


    .direction-clients {
        padding:
            80px
            0;
    }


    .direction-clients-grid {
        grid-template-columns:
            1fr;
    }


    .direction-client {
        min-height: 180px;
    }


    .direction-cta {
        min-height: 570px;
    }


    .direction-cta-actions {
        flex-direction: column;
    }


    .direction-cta-actions a {
        width: 100%;
    }


    .direction-page
    .footer-container {
        min-height: 215px;

        padding:
            42px
            0;

        flex-direction: column;

        justify-content: center;

        gap: 25px;

        text-align: center;
    }


    .floating-whatsapp {
        width: 52px;
        height: 52px;

        right: 16px;

        bottom:
            calc(
                16px +
                env(safe-area-inset-bottom)
            );
    }


    .floating-whatsapp svg {
        width: 30px;
        height: 30px;
    }


    .floating-whatsapp-tooltip {
        display: none;
    }

}


/* =========================================
   FOCO Y NAVEGACIÓN CON TECLADO
========================================= */

.ld-btn:focus-visible,
.direction-look-arrow:focus-visible,
.direction-workflow__tab:focus-visible,
.direction-method__tab:focus-visible,
.direction-experiences-intro a:focus-visible,
.direction-experience-panel a:focus-visible,
.direction-cta-actions a:focus-visible,
.floating-whatsapp:focus-visible {
    outline:
        2px solid
        #EAA736;

    outline-offset:
        4px;
}


.direction-look-card:focus-visible {
    outline:
        none;

    box-shadow:
        inset
        0
        0
        0
        3px
        #EAA736;
}


.direction-workflow__information:focus-visible,
.direction-method__content:focus-visible {
    outline:
        1px solid
        rgba(234, 167, 54, 0.72);

    outline-offset:
        -6px;
}


/* =========================================
   17. MOVIMIENTO REDUCIDO
========================================= */

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

    .direction-page main,
    .direction-page .footer,
    .reveal-block,
    .reveal-mask::after,
    .direction-method__media img,
    .direction-method__content,
    .direction-workflow__media img,
    .direction-workflow__information,
    .floating-whatsapp {
        opacity: 1;

        transform: none;

        animation: none;

        transition: none;
    }
}


/* =========================================
   CTA COMPACTO DE WHATSAPP
========================================= */

.direction-page .direction-cta {
    min-height: 0;
    padding:
        clamp(38px, 4vw, 58px)
        0;
    display: block;
    overflow: visible;
    background-color: #FFFFFF;
    color: #161513;
    text-align: left;
}


.direction-cta__inner {
    width: min(1240px, 88%);
    margin: 0 auto;
    padding:
        18px
        0;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 430px);
    align-items: center;
    gap:
        clamp(34px, 6vw, 92px);
    border-top:
        3px solid
        #EAA736;
    border-bottom:
        1px solid
        rgba(22, 21, 19, 0.16);
}


.direction-cta__copy {
    min-width: 0;
    display: grid;
    grid-template-columns:
        minmax(150px, 0.34fr)
        minmax(260px, 1fr);
    align-items: start;
    column-gap:
        clamp(22px, 3vw, 48px);
}


.direction-cta__eyebrow {
    margin: 3px 0 0;
    color:
        rgba(22, 21, 19, 0.58);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.65px;
    text-transform: uppercase;
}


.direction-cta__copy h2 {
    margin: 0;
    max-width: 18ch;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    font-size:
        clamp(25px, 2.6vw, 43px);
    font-weight: 900;
    line-height: 0.93;
    letter-spacing: -1.5px;
    text-transform: uppercase;
}


.direction-cta__copy h2 span {
    display: block;
    color: #EAA736;
}


.direction-cta__description {
    grid-column: 1 / -1;
    margin:
        13px
        0
        0;
    color:
        rgba(22, 21, 19, 0.62);
    font-size: 10px;
    line-height: 1.55;
}


.direction-cta__link {
    min-height: 82px;
    padding:
        15px
        22px;
    display: grid;
    grid-template-columns:
        1fr
        auto;
    align-items: center;
    gap: 22px;
    border:
        1px solid
        #161513;
    background-color: #161513;
    color: #FFFFFF;
    text-decoration: none;
    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}


.direction-cta__link-copy {
    display: grid;
    gap: 2px;
}


.direction-cta__link-copy small {
    color: #EAA736;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    transition:
        color 250ms ease;
}


.direction-cta__link-copy strong {
    font-size: 12px;
    line-height: 1.25;
}


.direction-cta__link-copy > span {
    color:
        rgba(255, 255, 255, 0.72);
    font-size: 9px;
    letter-spacing: 0.35px;
    transition:
        color 250ms ease;
}


.direction-cta__arrow {
    color: #EAA736;
    font-size: 22px;
    line-height: 1;
    transition:
        color 250ms ease,
        transform 250ms ease;
}


.direction-cta__link:hover {
    border-color: #EAA736;
    background-color: #EAA736;
    color: #161513;
    transform:
        translateY(-2px);
}


.direction-cta__link:hover
.direction-cta__link-copy small,
.direction-cta__link:hover
.direction-cta__link-copy > span,
.direction-cta__link:hover
.direction-cta__arrow {
    color: #161513;
}


.direction-cta__link:hover
.direction-cta__arrow {
    transform:
        translateX(4px);
}


.direction-cta__link:focus-visible {
    outline:
        2px solid
        #EAA736;
    outline-offset:
        4px;
}


@media (max-width: 900px) {

    .direction-cta__inner {
        grid-template-columns:
            1fr;
        gap: 24px;
    }


    .direction-cta__link {
        width: 100%;
    }

}


@media (max-width: 620px) {

    .direction-page .direction-cta {
        padding:
            30px
            0;
    }


    .direction-cta__inner {
        width: 90%;
        padding:
            16px
            0;
    }


    .direction-cta__copy {
        grid-template-columns:
            1fr;
        gap: 8px;
    }


    .direction-cta__eyebrow {
        margin: 0;
    }


    .direction-cta__copy h2 {
        max-width: 16ch;
        font-size:
            clamp(24px, 8.3vw, 34px);
    }


    .direction-cta__description {
        grid-column: auto;
        margin-top: 2px;
    }


    .direction-cta__link {
        min-height: 74px;
        padding:
            13px
            17px;
    }

}


/* =========================================
   HERO: ESCALA TIPOGRÁFICA REDUCIDA
========================================= */

.ld-hero__content {
    width:
        min(430px, 43%);
}


.ld-hero__eyebrow {
    margin-bottom:
        clamp(8px, 0.8vw, 12px);

    font-size:
        clamp(6px, 0.35vw, 7px);

    letter-spacing:
        0.16em;
}


.ld-hero__eyebrow::after {
    width: 28px;
    height: 1px;
    margin-top: 7px;
}


.ld-hero__title {
    margin-bottom:
        clamp(9px, 0.85vw, 13px);

    font-size:
        clamp(29px, 3.6vw, 63px);

    letter-spacing:
        -0.055em;

    line-height:
        0.80;
}


.ld-hero__title span:first-child {
    margin-bottom:
        0.28em;

    font-size:
        0.2em;

    letter-spacing:
        0.16em;
}


.ld-hero__subtitle {
    max-width: 340px;

    margin-bottom: 8px;

    font-size:
        clamp(8px, 0.725vw, 12px);

    letter-spacing:
        -0.02em;

    line-height:
        1.12;
}


.ld-hero__text {
    max-width: 330px;

    margin-bottom: 15px;

    font-size:
        clamp(7px, 0.48vw, 8px);

    line-height:
        1.55;
}


.ld-hero__actions {
    gap: 7px;
}


.ld-btn {
    min-width: 132px;
    height: 34px;

    padding:
        0
        14px;

    font-size: 6px;
    letter-spacing: 0.12em;
}


.ld-hero__counter {
    min-width: 38px;

    font-size: 6px;
    letter-spacing: 0.12em;
}


.ld-hero__word {
    font-size:
        clamp(53px, 7.5vw, 125px);

    letter-spacing:
        -0.055em;
}


@media (max-width: 1024px) {

    .ld-hero__content {
        width:
            min(400px, 48%);
    }


    .ld-hero__title {
        font-size:
            clamp(28px, 4.25vw, 44px);
    }


    .ld-hero__subtitle {
        font-size:
            clamp(8px, 1.1vw, 11px);
    }

}


@media (max-width: 700px) {

    .ld-hero__content {
        width: 100%;
        max-width: 340px;
    }


    .ld-hero__eyebrow {
        margin-bottom: 8px;
    }


    .ld-hero__title {
        margin-bottom: 9px;

        font-size:
            clamp(24px, 7.5vw, 36px);

        letter-spacing:
            -0.045em;
    }


    .ld-hero__title span:first-child {
        font-size:
            0.2em;
    }


    .ld-hero__subtitle {
        max-width: 270px;

        font-size:
            clamp(8px, 2.3vw, 10px);
    }


    .ld-hero__text {
        max-width: 285px;

        margin-bottom: 13px;

        font-size: 8px;
    }


    .ld-btn {
        height: 34px;
        font-size: 6px;
    }

}


@media (max-width: 420px) {

    .ld-hero__title {
        font-size:
            clamp(23px, 7vw, 29px);
    }


    .ld-hero__subtitle {
        font-size:
            clamp(8px, 2.2vw, 9px);
    }

}
    
/* =========================================
   HERO LA DIRECCIÓN — ESCALA DEFINITIVA
   Basada en la portada principal
========================================= */


/* CONTENEDOR GENERAL */

.ld-hero__content {
    width:
        min(660px, 52%);

    padding-left:
        22px;

    border-left:
        1px solid
        var(--direction-gold);
}


/* ETIQUETA SUPERIOR */

.ld-hero__eyebrow {
    margin-bottom:
        18px;

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.16em;
}


.ld-hero__eyebrow::after {
    width:
        38px;

    height:
        2px;

    margin-top:
        10px;
}


/* TÍTULO PRINCIPAL */

.ld-hero__title {
    margin-bottom:
        20px;

    font-family:
        var(--font-primary) !important;

    font-size:
        clamp(62px, 6.8vw, 112px);

    font-weight:
        800;

    line-height:
        0.82;

    letter-spacing:
        -0.055em;

    text-transform:
        uppercase;
}


/* "LA" */

.ld-hero__title span:first-child {
    margin-bottom:
        0.34em;

    color:
        var(--direction-gold);

    font-size:
        0.20em;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


/* DIRECCIÓN */

.ld-hero__title span:last-child {
    color:
        #FFFFFF;
}


/* PUNTO DORADO */

.ld-hero__title span:last-child::after {
    content:
        ".";

    color:
        var(--direction-gold);
}


/* SUBTÍTULO */

.ld-hero__subtitle {
    max-width:
        520px;

    margin-bottom:
        12px;

    font-family:
        var(--font-primary) !important;

    font-size:
        clamp(20px, 1.8vw, 30px);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.035em;
}


.ld-hero__subtitle span {
    color:
        var(--direction-gold);
}


/* DESCRIPCIÓN */

.ld-hero__text {
    max-width:
        520px;

    margin-bottom:
        24px;

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

    font-size:
        13px;

    line-height:
        1.45;
}


/* BOTONES */

.ld-hero__actions {
    gap:
        10px;
}


.ld-btn {
    min-width:
        185px;

    height:
        44px;

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

    font-size:
        7px;
}

/* =========================================
   LA DIRECCIÓN — TABLET
========================================= */

@media (max-width: 1024px) {

    .ld-hero__content {
        width:
            min(580px, 62%);

        padding-left:
            19px;
    }


    .ld-hero__eyebrow {
        margin-bottom:
            16px;

        font-size:
            9px;
    }


    .ld-hero__title {
        margin-bottom:
            18px;

        font-size:
            clamp(54px, 7.5vw, 82px);
    }


    .ld-hero__subtitle {
        font-size:
            clamp(18px, 2.6vw, 25px);
    }


    .ld-hero__text {
        font-size:
            12px;
    }

}

/* =========================================
   LA DIRECCIÓN — MÓVIL
========================================= */

@media (max-width: 700px) {

    .ld-hero__content {
        width:
            calc(100% - 24px);

        max-width:
            520px;

        padding-left:
            15px;
    }


    .ld-hero__eyebrow {
        margin-bottom:
            13px;

        font-size:
            8px;

        letter-spacing:
            0.14em;
    }


    .ld-hero__eyebrow::after {
        width:
            32px;

        height:
            1px;

        margin-top:
            8px;
    }


    .ld-hero__title {
        margin-bottom:
            16px;

        font-size:
            clamp(42px, 13vw, 62px);

        line-height:
            0.83;

        letter-spacing:
            -0.05em;
    }


    .ld-hero__title span:first-child {
        font-size:
            0.20em;
    }


    .ld-hero__subtitle {
        max-width:
            390px;

        margin-bottom:
            10px;

        font-size:
            clamp(17px, 5vw, 22px);
    }


    .ld-hero__text {
        max-width:
            390px;

        margin-bottom:
            20px;

        font-size:
            11px;
    }


    .ld-hero__actions {
        gap:
            8px;
    }


    .ld-btn {
        min-width:
            0;

        height:
            41px;

        font-size:
            7px;
    }

}