body {
    color: #fff;
    background-color: #111;
    font-family: PlusJakartaSans-ExtraLightItalic;
}

.dvbase {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dv_padre {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 1800px;
}

.dvhj01 {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.7rem;
    background-color: #1e1f22;
}

.img01 {
    width: 100%;
    max-width: 300px;
    height: auto;
    justify-self: center;
    border-radius: 0.7rem;
}

#dvhj_text01 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    hyphens: auto;
}

.dvnt_text01 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    border-radius: 0.7rem;
}

.span_general {
    font-family: PlusJakartaSans-SemiBold;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-decoration: underline;
}

.span_title {
    font-family: PlusJakartaSans-SemiBoldItalic;
    font-size: 1.5rem;
}

.p_margin_bot01 {
    margin-bottom: 0rem;
}

.provisional01 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img02 {
    display: none;
}

@media (max-width: 1500px) {
    .provisional01 {
        display: none;
    }

    .dvhj01 {
        grid-template-columns: repeat(2, auto);
    }
}

@media (max-width: 1000px) {
    .dvhj01 {
        grid-template-columns: 1fr;
        text-align: center;
        hyphens: auto;
        gap: 0.5rem;
    }

    #dvhj_text {
        align-items: center;
    }

    .img01 {
        display: none;
    }

    .img02 {
        display: block;
        width: 100%;
        max-width: 400px;
        height: auto;
        justify-self: center;
        border: 1px solid #ff0;
    }
}

@media (max-width: 768px) {
    #dvhj_text01 {
        grid-template-columns: 1fr;
        padding: 0.5rem;
    }
}

/* ---------- BORDES DE COLORES ---------- */

.brdr_clr01 {
    border: 1px solid #ff0;
}

.brdr_clr02 {
    border: 1px solid #0ff;
}

.brdr_clr03 {
    border: 1px solid #f0f;
}

.brdr_clr01, .brdr_clr02, .brdr_clr03 {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.3),
    0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ---------- BORDES DE COLORES ---------- */

.dvspan02 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    grid-column: 1 / 3;
    border-radius: 0.7rem;
}

.span_general02 {
    font-family: PlusJakartaSans-SemiBold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-decoration: underline;
}

.p_margin_bot02 {
    font-size: 1.1rem;
}

.dvhj02 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: 0.7rem;
    margin-bottom: 2rem;
    background-color: #1e1f22;
}

#dvhj_text02 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    hyphens: auto;
    grid-column: 1;
    border-radius: 0.7rem;
}

.hj02_img01 {
    grid-column: 2;
}

.hj02_img02 {
    display: none;
}

@media (max-width: 1280px) {
    #dvhj_text02 {
        grid-template-columns: 1fr;
    }

    .span_general02 {
        font-size: 1.5rem;
    }

    .p_margin_bot02 {
        font-size: 1.1rem;
    }
}

@media (max-width: 1000px) {
    .dvhj02 {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .hj02_img01 {
        display: none;
    }

    .hj02_img02 {
        display: block;
        grid-column: 1;
        grid-row: 2;
    }

    #dvhj_text02 {
        grid-column: 2;
        grid-row: 2;
    }

    .p_margin_bot02 {
        font-size: 0.9rem;
    }

    #dv_desaparecer01, #dv_desaparecer02 {
        display: none;
    }
}

@media (max-width: 768px) {
    .dvhj02 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .dvspan02 {
        grid-column: 1;
        grid-row: 1;
    }

    #dvhj_text02 {
        grid-column: 1;
        grid-row: 3;
    }

    .hj02_img02 {
        grid-column: 1;
        grid-row: 2;
    }

    #dvhj_text02 {
        padding: 0.5rem;
    }

    .p_margin_bot02 {
        font-size: 1rem;
    }
}

.dvhj03 {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: 0.7rem;
}