body {
    font-family: PlusJakartaSans-ExtraBold;
    background-color: #272727;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #000;
}

.a_imgs_lnks_prjct {
    display: flex;
}

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

.dv_road_panel02 {
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    gap: 0.5rem;
    max-width: 1293.71px;
}

.rp_padre01 {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 0.5rem;
}

.imgruta01 {
    width: 16rem;
    height: auto;
}

.imgruta03 {
    width: 16rem;
    height: auto;
}

.imgruta01:hover {
    transform: translateY(-0px) scale(1.07);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-in;
}

.imgruta03:hover {
    transform: translateY(-0px) scale(1.07);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-in;
}

.dv_btns_road {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
}

.cubic_img {
    grid-column: 1;
}

.dv_boton_panel {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2;
}

.imgruta02 {
    display: none;
}

.imgruta04 {
    display: none;
}

/* ------------------------------------------ Grid invertido */

.rp_padre02 {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 0.5rem;
}

    .rp_padre02:nth-child(even) {
        grid-template-columns: 4fr 1fr;
    }

        .rp_padre02:nth-child(even) > .cubic_img {
            grid-column: 2;
            grid-row: 1;
        }

        .rp_padre02:nth-child(even) > .dv_boton_panel {
            grid-column: 1;
            grid-row: 1;
        }

/* ------------------------------------------ Grid invertido */

.a_in_div_mode {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f78db6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    text-align: center;
}

    .a_in_div_mode:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        background-color: #e60039;
    }

.span_rp01 {
    text-shadow: -0.6px -0.6px 0 #fff, 0.6px -0.6px 0 #fff, -0.6px 0.6px 0 #fff, 0.6px 0.6px 0 #fff; /* ---------- ESTO ES DE ROADMAP */
}

.span_rp02 {
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* ---------- ESTO ES DEL PANEL */
    margin: 1rem;
    font-size: 1.5rem;
}

/* ---------- Bordes, Sombras y Colores */
.brdr_shdw {
    border: 1px solid #fff;
    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);
}

.span_mid {
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* ---------- ESTO ES DE ROADMAP */
}

.clr01 {
    background-color: #ffa500;
}

.clr02 {
    background-color: #4caf50;
}

.clr03 {
    background-color: #2196f3;
}

.clr01:hover {
    background-color: #f00;
    color: #fff;
}

    .clr01:hover .span_rp01 {
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }

.clr02:hover {
    background-color: #0f0;
    color: #000;
}

    .clr02:hover .span_mid {
        color: #000;
        text-shadow: -0.6px -0.6px 0 #fff, 0.6px -0.6px 0 #fff, -0.6px 0.6px 0 #fff, 0.6px 0.6px 0 #fff;
    }

.clr03:hover {
    background-color: #00f;
    color: #fff;
}

    .clr03:hover .span_rp01 {
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
/* ---------- Bordes, Sombras y Colores */

@media (max-width: 768px) {
    .rp_padre01 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
        gap: 0;
    }

    .imgruta01, .imgruta03 {
        display: none;
    }

    .imgruta02, .imgruta04 {
        display: block;
        width: 100%;
        height: auto;
        min-width: 300px;
    }

    .dv_road_panel01 {
        background-color: #fff;
    }

    .brdr_shdw {
        border: 1.5px solid #000;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 1);
    }

    .dv_road_panel02 {
        padding: 0.5rem;
    }
}

@media (max-width: 650px) {
    .rp_padre02 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
        gap: 0;
    }

        /* --- Asegurarse de que no haya reglas aplicadas a los elementos dentro de .rp_padre02 --- */
        .rp_padre02:nth-child(even) {
            grid-template-columns: auto; /* --- Anula el cambio en los elementos con paridad --- */
        }

            .rp_padre02:nth-child(even) > .cubic_img {
                grid-column: auto;
                grid-row: auto;
            }

            .rp_padre02:nth-child(even) > .dv_boton_panel {
                grid-column: auto;
                grid-row: auto;
            }

    /* --- Asegura que el .dv_boton_panel se comporte correctamente en este media query --- */
    .dv_boton_panel {
        grid-column: auto;
    }

    #onlypanel {
        padding: 1rem;
        gap: 1rem;
        background-color: #292929;
    }

    .rp_padre02 {
        border-radius: 0.1rem;
        outline: 2px solid #fff;
    }

    .brdr_shdw02 {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 16px 40px rgba(0, 0, 0, 0.4);
    }
}

@media (max-width: 900px) {
    .span_rp02 {
        font-size: 1.25rem;
    }
}

@media (max-width: 700px) {
    .span_rp02 {
        font-size: 1.12rem;
    }
}