/* Bloques editoriales: negro carbón sobre el fondo negro puro de la página. */
.df-guide-feature {
    background: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 0;
    height: auto;
    margin: 0 auto 34px;
    min-height: 0;
    overflow: hidden;
    width: min(70vw, 1640px);
}

.df-guide-signature {
    border-top: 1px solid rgba(195,144,49,.24);
    margin: 76px auto 90px;
    padding-top: 28px;
    width: min(70vw, 1640px);
}
.df-guide-signature__eyebrow {
    color: #c39032;
    font: 600 10px/1.2 Poppins, Arial, sans-serif;
    letter-spacing: .2em;
    margin: 0 0 18px;
    text-transform: uppercase;
}
.df-guide-signature__card { align-items: center; display: flex; }
.df-guide-signature__logo {
    align-items: center;
    border-right: 1px solid rgba(255,255,255,.16);
    display: flex;
    min-height: 82px;
    padding-right: 24px;
}
.df-guide-signature__logo img { display: block; height: auto; max-width: 150px; }
.df-guide-signature__details { display: flex; flex-direction: column; padding-left: 24px; }
.df-guide-signature__details strong { color: #f5f2ec; font: 700 16px/1.25 Poppins, Arial, sans-serif; }
.df-guide-signature__details span { color: #aaa59e; font: 400 13px/1.5 Poppins, Arial, sans-serif; }
.df-guide-signature__details a { color: #d1cdc6; font: 400 12px/1.55 Poppins, Arial, sans-serif; text-decoration: none; }
.df-guide-signature__details a:hover { color: #78e4d2; }
.df-guide-signature__details small { color: #77736e; font: 400 10px/1.5 Poppins, Arial, sans-serif; letter-spacing: .05em; }
.df-guide-signature__updated { color: #77736e; font: 400 11px/1.5 Poppins, Arial, sans-serif; margin: 16px 0 0; }

@media (max-width: 700px) {
    .df-guide-signature { margin: 54px auto 64px; width: calc(100% - 32px); }
    .df-guide-signature__card { align-items: flex-start; }
    .df-guide-signature__logo { min-height: 74px; padding-right: 18px; }
    .df-guide-signature__logo img { max-width: 88px; }
    .df-guide-signature__details { padding-left: 18px; }
    .df-guide-signature__details strong { font-size: 14px; }
}

.df-guide-feature:first-of-type { border-top-color: rgba(255, 255, 255, .035); }

.df-guide-feature__inner {
    margin: 0;
    min-height: 0;
    padding: 54px 56px;
    width: 100%;
}

.df-guide-feature--with-media .df-guide-feature__inner {
    align-items: stretch;
    display: grid;
    gap: 27px;
    grid-template-columns: minmax(360px, .8fr) 28px minmax(420px, 1.2fr);
}

.df-guide-feature__content {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    min-width: 0;
}

.df-guide-feature:not(.df-guide-feature--with-media) .df-guide-feature__inner {
    min-height: 0;
    padding: clamp(52px, 5vw, 78px) clamp(48px, 5vw, 82px);
}

.df-guide-feature--text-only .df-guide-feature__content {
    align-items: start;
    display: grid;
    gap: clamp(42px, 5vw, 76px);
    grid-template-columns: minmax(340px, .7fr) minmax(0, 1.3fr);
    max-width: none;
}

.df-guide-feature--text-only .df-guide-feature__heading { min-width: 0; }
.df-guide-feature--text-only .df-guide-feature__title {
    font-size: clamp(36px, 2.65vw, 48px);
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}
.df-guide-feature--text-only .df-guide-feature__body {
    margin: 0;
    max-width: none;
    padding: 7px 0 0;
    width: 100%;
}

.df-guide-feature--text-only .df-guide-feature__full {
    max-width: 820px;
    width: 100%;
}

.df-guide-feature__number {
    background: none;
    border-bottom: 1px solid rgba(195, 144, 49, .48);
    color: #c39032;
    font: 600 clamp(31px, 2.45vw, 43px)/1 Poppins, Arial, sans-serif;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    padding: 0 0 17px;
    width: 200px;
}

.df-guide-feature__title {
    color: #f8f8f8;
    font: 700 clamp(38px, 2.7vw, 48px)/1.08 Poppins, Arial, sans-serif;
    hyphens: none;
    letter-spacing: -.035em;
    margin: 0;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
}

.df-guide-feature__rule {
    background: #c39032;
    display: block;
    height: 7px;
    margin: 29px 0 0;
    width: 112px;
}

.df-guide-feature__body {
    border: 0;
    margin: 38px 0 0;
    max-width: 480px;
    padding: 0;
}

.df-guide-feature:not(.df-guide-feature--with-media) .df-guide-feature__body {
    max-width: none;
    width: 100%;
}

.df-guide-feature__copy {
    color: #bcb7b0;
    font: 400 20px/1.58 Lato, Arial, sans-serif;
    max-width: 100%;
}

.df-guide-feature__divider {
    align-self: stretch;
    background: transparent;
    display: block;
    min-height: 100%;
    position: relative;
    width: 28px;
}

.df-guide-feature__divider::after {
    background: linear-gradient(
        180deg,
        rgba(195, 144, 50, .95) 0%,
        rgba(195, 144, 50, .42) 42%,
        rgba(195, 144, 50, 0) 100%
    );
    content: "";
    height: 100%;
    left: 11px;
    position: absolute;
    top: 0;
    width: 1px;
}

.df-guide-feature__media {
    aspect-ratio: 16 / 9;
    align-self: start;
    background: #000;
    border: 0;
    border-radius: 0;
    margin: 0;
    max-width: none;
    overflow: hidden;
    width: 100%;
}

.df-guide-feature__media button {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: zoom-in;
    display: block;
    height: 100%;
    padding: 0;
    position: relative;
    width: 100%;
}

.df-guide-feature__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
    width: 100%;
}

.df-guide-feature__media iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.df-guide-feature__media button:hover img { transform: scale(1.015); }

.df-guide-feature__zoom {
    align-items: center;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(195, 144, 50, .72);
    bottom: 16px;
    color: #c39032;
    display: flex;
    font: 400 19px/1 Poppins, Arial, sans-serif;
    height: 42px;
    justify-content: center;
    opacity: .9;
    position: absolute;
    right: 16px;
    transition: .25s ease;
    width: 42px;
}

.df-guide-feature__media button:hover .df-guide-feature__zoom { background: #c39032; color: #070707; }

.df-guide-feature__copy p { margin: 0 0 1em; }
.df-guide-feature__copy p:last-child { margin-bottom: 0; }
.df-guide-feature__copy ul, .df-guide-feature__copy ol {
    margin: 0 0 1em;
    padding-left: 1.3em;
}

/* Pregunta y respuesta directa: composición editorial propia de las guías. */
.df-answer {
    background: #020707;
    border: 1px solid rgba(94, 222, 209, .62);
    border-radius: 0;
    color: #fff;
    margin: 0 0 88px;
    overflow: hidden;
    position: relative;
    transform: translateX(-50%);
    max-width: none;
    width: min(70vw, 1640px);
    left: 50%;
}

.df-answer::before {
    background: linear-gradient(90deg, rgba(1,7,8,.99) 0%, rgba(1,7,8,.93) 41%, rgba(1,7,8,.43) 70%, rgba(1,7,8,.04) 100%), var(--df-answer-image) center/cover no-repeat;
    content: "";
    inset: 0 0 auto;
    height: 382px;
    position: absolute;
}

.df-answer::after {
    background: #20dfcc;
    content: "";
    height: calc(100% - 76px);
    left: 54px;
    position: absolute;
    top: 52px;
    width: 3px;
    z-index: 1;
}

.df-answer__question, .df-answer__response { padding-left: 104px; padding-right: 64px; position: relative; z-index: 2; }
.df-answer__question { min-height: 382px; padding-bottom: 44px; padding-top: 54px; }
.df-answer__meta { align-items: center; color: #1ddbc9; display: flex; font: 600 14px/1 Poppins, Arial, sans-serif; gap: 27px; letter-spacing: .25em; text-transform: uppercase; }
.df-answer__meta span:first-child { letter-spacing: .12em; }
.df-answer h2 { color: #fff; font: 700 clamp(30px, 2.75vw, 48px)/1.08 Poppins, Arial, sans-serif; letter-spacing: -.035em; margin: 29px 0 0; max-width: 670px; }
.df-answer__rule { background: #20dfcc; display: block; height: 5px; margin-top: 28px; width: 57px; }
.df-answer__response { border-top: 1px solid rgba(164, 184, 186, .48); min-height: 238px; padding-bottom: 42px; padding-top: 39px; }
.df-answer__response .df-answer__rule { height: 4px; margin-top: 22px; width: 31px; }
.df-answer__response-copy { align-items: center; display: flex; gap: 23px; margin-top: 23px; max-width: 850px; }
.df-answer__response-copy > i { align-items: center; border: 2px solid rgba(32, 223, 204, .48); border-radius: 50%; color: #20dfcc; display: inline-flex; flex: 0 0 66px; font-size: 25px; height: 66px; justify-content: center; }
.df-answer__response-copy p { border-left: 1px solid rgba(171, 190, 192, .45); color: rgba(255,255,255,.85); font: 400 clamp(16px, 1.2vw, 19px)/1.5 Lato, Arial, sans-serif; margin: 0; padding-left: 23px; }

@media (max-width: 1250px) {
    .df-guide-feature--with-media .df-guide-feature__inner {
        gap: 20px;
        grid-template-columns: minmax(280px, .9fr) 18px minmax(280px, 1.1fr);
        padding: 42px;
    }
    .df-guide-feature__divider { width: 18px; }
    .df-guide-feature__divider::after { left: 8px; }
    .df-guide-feature__title { font-size: clamp(32px, 3.4vw, 42px); }
    .df-guide-feature__copy { font-size: 18px; }
}

@media (max-width: 1000px) {
    .df-guide-feature--with-media .df-guide-feature__inner { display: block; }
    .df-guide-feature__content { max-width: 720px; }
    .df-guide-feature--text-only .df-guide-feature__content {
        display: block;
        max-width: none;
    }
    .df-guide-feature--text-only .df-guide-feature__body {
        margin-top: 36px;
        padding-top: 34px;
        position: relative;
    }
    .df-guide-feature--text-only .df-guide-feature__body::before {
        background: linear-gradient(90deg, rgba(195, 144, 50, .62), transparent);
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .df-guide-feature__divider { display: none; }
    .df-guide-feature__media { margin-top: 34px; }
}

@media (max-width: 700px) {
    .df-content.df-wrap { width: calc(100% - 32px); }
    .df-answer { border-radius: 0; margin-bottom: 58px; max-width: none; transform: none; width: 100%; left: auto; }
    .df-answer::before { height: 420px; }
    .df-answer::after { height: calc(100% - 58px); left: 18px; top: 30px; width: 2px; }
    .df-answer__question, .df-answer__response { padding-left: 42px; padding-right: 22px; }
    .df-answer__question { min-height: 420px; padding-bottom: 34px; padding-top: 36px; }
    .df-answer__meta { font-size: 10px; gap: 14px; letter-spacing: .18em; }
    .df-answer h2 { font-size: clamp(28px, 8vw, 32px); line-height: 1.09; margin-top: 25px; max-width: 100%; overflow-wrap: anywhere; }
    .df-answer__rule { height: 4px; margin-top: 25px; width: 48px; }
    .df-answer__response { min-height: 0; padding-bottom: 34px; padding-top: 32px; }
    .df-answer__response-copy { display: block; margin-top: 22px; max-width: 100%; }
    .df-answer__response-copy > i { display: flex; font-size: 17px; height: 44px; width: 44px; }
    .df-answer__response-copy p { border-left: 0; font-size: 16px; line-height: 1.6; margin-top: 16px; max-width: 100%; overflow-wrap: anywhere; padding-left: 0; }
}

.df-guide-feature__toggle {
    appearance: none;
    background: transparent;
    border: 0;
    color: #c39032;
    cursor: pointer;
    display: block;
    font: 700 15px/1 Poppins, Arial, sans-serif;
    letter-spacing: .12em;
    margin-top: 30px;
    padding: 0;
    text-align: left;
    text-transform: uppercase;
}

.df-guide-feature__toggle b { display: inline-block; font-size: 17px; margin-left: 5px; }
.df-guide-feature__less-label { display: none; }
.df-guide-feature__toggle[aria-expanded="true"] .df-guide-feature__more-label { display: none; }
.df-guide-feature__toggle[aria-expanded="true"] .df-guide-feature__less-label { display: inline; }

.df-guide-feature__expanded {
    background: linear-gradient(180deg, rgba(195, 144, 49, .035), transparent 150px);
    border-top: 1px solid rgba(195, 144, 49, .28);
    grid-column: 1 / -1;
    margin-top: 19px;
    padding: clamp(38px, 4vw, 64px) clamp(0px, 3vw, 46px) 12px;
    width: 100%;
}

.df-guide-feature__expanded[hidden] { display: none; }
.df-guide-feature__expanded .df-guide-feature__full {
    color: #bcb7b0;
    font: 400 clamp(17px, 1.12vw, 20px)/1.78 Lato, Arial, sans-serif;
    margin: 0 auto;
    max-width: 1040px;
    width: 100%;
}

.df-guide-feature__full h2 {
    color: #f4f1eb;
    font: 650 clamp(28px, 2.2vw, 40px)/1.18 Poppins, Arial, sans-serif;
    letter-spacing: -.025em;
    margin: 0 0 38px;
    max-width: 820px;
    overflow-wrap: normal;
}

.df-guide-feature__full h2::after {
    background: linear-gradient(90deg, #c39032, rgba(195, 144, 50, .34), transparent);
    content: "";
    display: block;
    height: 3px;
    margin-top: 24px;
    width: 92px;
}

.df-guide-feature__full h3 {
    color: #eeeae3;
    font: 600 clamp(22px, 1.65vw, 29px)/1.3 Poppins, Arial, sans-serif;
    margin: 2em 0 .75em;
}

.df-guide-feature__full p { margin: 0 0 1.55em; max-width: 960px; }
.df-guide-feature__full p:first-of-type {
    border-left: 2px solid rgba(195, 144, 50, .72);
    color: #ded9d1;
    font-size: 1.08em;
    padding-left: clamp(18px, 2vw, 28px);
}
.df-guide-feature__full strong { color: #f0ece5; font-weight: 700; }
.df-guide-feature__full ul, .df-guide-feature__full ol { margin: 0 0 1.55em; max-width: 900px; padding-left: 1.4em; }
.df-guide-feature__full li + li { margin-top: .55em; }
.df-guide-feature__full blockquote {
    border-left: 3px solid #c39032;
    color: #ded9d1;
    font-size: 1.08em;
    margin: 2em 0;
    max-width: 900px;
    padding: .35em 0 .35em 28px;
}

@media (min-width: 1001px) {
    .df-guide-feature__expanded .df-guide-feature__full {
        column-count: 2;
        column-fill: balance;
        column-gap: clamp(48px, 5vw, 82px);
        column-rule: 1px solid rgba(195, 144, 49, .18);
    }

    .df-guide-feature__full h2 {
        column-span: all;
    }

    .df-guide-feature__full p,
    .df-guide-feature__full ul,
    .df-guide-feature__full ol,
    .df-guide-feature__full blockquote {
        break-inside: avoid-column;
        orphans: 3;
        widows: 3;
    }
}

.df-guide-lightbox {
    background: transparent;
    border: 0;
    color: #fff;
    max-height: 94vh;
    max-width: 94vw;
    overflow: visible;
    padding: 0;
}

.df-guide-lightbox[open] { display: grid; place-items: center; }
.df-guide-lightbox::backdrop { backdrop-filter: blur(5px); background: rgba(0, 0, 0, .92); }
.df-guide-lightbox img { display: block; max-height: 88vh; max-width: 92vw; object-fit: contain; }
.df-guide-lightbox__close {
    background: rgba(11, 11, 11, .92);
    border: 1px solid rgba(195, 144, 50, .75);
    color: #c39032;
    cursor: pointer;
    font: 300 27px/1 Poppins, Arial, sans-serif;
    height: 42px;
    padding: 0;
    position: absolute;
    right: 0;
    top: -50px;
    width: 42px;
}

@media (max-width: 700px) {
    .df-guide-feature {
        background: #0b0b0b;
        border-radius: 0;
        margin-bottom: 22px;
        min-height: 0;
        width: calc(100% - 32px);
    }

    .df-guide-feature__inner,
    .df-guide-feature:not(.df-guide-feature--with-media) .df-guide-feature__inner {
        min-height: 0;
        padding: 36px 24px 42px;
    }
    .df-guide-feature--text-only .df-guide-feature__content { display: block; }
    .df-guide-feature--text-only .df-guide-feature__body { margin-top: 32px; padding-top: 30px; position: relative; }
    .df-guide-feature--text-only .df-guide-feature__body::before {
        background: linear-gradient(90deg, rgba(195, 144, 50, .62), transparent);
        content: "";
        height: 1px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .df-guide-feature__media { border-radius: 0; margin-top: 28px; max-width: none; }
    .df-guide-feature__number { margin-bottom: 22px; }
    .df-guide-feature__title { font-size: clamp(29px, 8vw, 34px); hyphens: none; line-height: 1.12; max-width: 100%; overflow-wrap: normal; word-break: normal; }
    .df-guide-feature__rule { margin: 22px 0 0; }
    .df-guide-feature__body { margin-top: 30px; padding-top: 0; }
    .df-guide-feature__body, .df-guide-feature__copy { max-width: 100%; width: 100%; }
    .df-guide-feature__copy { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
    .df-guide-feature__copy ul, .df-guide-feature__copy ol { padding-left: 1.25em; }
    .df-guide-feature__toggle { font-size: 13px; margin-top: 24px; }
    .df-guide-feature__expanded { margin-top: 30px; padding: 30px 0 4px; }
    .df-guide-feature__full h2 { font-size: clamp(25px, 7vw, 31px); margin-bottom: 30px; overflow-wrap: anywhere; }
    .df-guide-feature__full h2::after { height: 2px; margin-top: 19px; width: 68px; }
    .df-guide-feature__full p:first-of-type { padding-left: 18px; }
    .df-guide-feature__zoom { bottom: 10px; height: 38px; right: 10px; width: 38px; }
}
