/* desktop */
div.contenedor_A_bienvenida {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    background-color: var(--neutral_2);
    border-radius: 1rem;
    border: 1px solid var(--neutral_3);
}
div.cascara {
    display: flex;
    flex-direction: column;
    padding: 0rem 6rem 6rem 6rem;
    background-color: var(--neutral_2);
}
div.container_1 {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 4rem;
    padding: 1rem 0rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

div.container_img {
    display: flex;
    width: 2rem;
    height: 2rem;
}
div.container_img2 {
    display: flex;
    gap: 0.6rem;
    width: 1.4rem;
    height: 1.4rem;
    align-items: center;
}

/* lado izquierdo */
div.contenedor_izquierdo{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    padding: 3rem 6rem 6rem 6rem;
    background-color: var(--neutral_1);
    border-radius: 1rem 0rem 0rem 1rem;
    gap: 1rem;
}
div.contenedor_izquierdo div.tarjeta{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    background-color: var(--neutral_1);
    border-radius: 1rem 1rem 1rem 1rem;
    border: 1px solid var(--neutral_3);
    padding: 1rem 1rem 1rem 1rem;
    gap: 0.5rem;
}
div.contenedor_izquierdo div.tarjeta div.fila{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    background-color: var(--neutral_1);
}

/* lado izquierdo superior*/
div.izq_superior{
    display: flex;
    flex-direction: column;
    height: 46%;
    width: 100%;
    background-color: var(--transparente);
}
/* lado izquierdo inferior*/
div.izq_inferior{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    gap: 10px;
    padding: 10px 0px 0px 0px;
    background-color: var(--transparente);
}
div.izq_inferior_superior{
    gap: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}
div.info_auto{
    display: flex;
    flex-direction: column;
    text-align: center;
}
div.logo{
    height: auto;
    width: 230px;
}

/* lado derecho */
div.contenedor_derecho {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    background-image: url('../../images/dc_1_bienvenida/v1_icono_bg.svg');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    background-color: var(--completado_1);
    padding: 3rem 3rem 3rem 3rem;
    border-radius: 0rem 1rem 1rem 0rem;
}
div.der_superior {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 17px;
    width: 100%;
    height: 30%;
    padding: 0px 0px 5% 0px;
    background-color: var(--transparente);
}
div.der_superior h2.titulos{
    color: var(--rojo_leon_2);
}
div.der_inferior {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;

    gap: 4%;
    padding: 0% 0px 0px 0px;

    background-image: url('../../images/dc_1_bienvenida/v1_icono_bg.svg');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    background-color: var(--transparente);
    overflow-y: auto;
}
.contenedor_A_bienvenida .tenemos_estos{
    display: block;
}
.contenedor_A_bienvenida .tenemos_estos_movil{
    display: none;
}
.contenedor_A_bienvenida .datos_auto {
    display: block;
}
.contenedor_A_bienvenida .datos_auto_movil_1 {
    display: none;
}
.contenedor_A_bienvenida .datos_auto_movil_2 {
    display: none;
}


/* movil */
@media (max-width: 768px) {
    div.cascara {
        display: flex;
        flex-direction: column;
        padding: 0rem 1rem 6rem 1rem;
        background-color: var(--neutral_2);
    }
    div.info_auto {
        display: flex;
        flex-direction: row;
        text-align: start;
        height: auto;
        width: auto;
        gap: 15px;
    }
    div.contenedor_base {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        min-width: 100%;
        background-color: var(--testing-color);
    }

    div.contenedor_A_bienvenida {
        flex-direction: column-reverse;
        height: auto;
    }
    div.contenedor_izquierdo {
        width: 100%;
        height: 24rem;
        padding: 1rem 1rem 1rem 1rem;
        justify-content: space-between;
        gap: 0;
        border-radius: 0rem 0rem 1rem 1rem;
    }
    div.izq_superior {
        height: 40%;
    }
    div.izq_inferior {
        height: 60%;
    }
    div.izq_inferior_superior {
        height: 100%;
        justify-content: space-between;
    }
    div.logo {
        padding: 0px 0px 0px 0px;
        height: 18px;
        width: 220px;
    }
    .contenedor_A_bienvenida .tenemos_estos{
        display: none;
    }
    .contenedor_A_bienvenida .tenemos_estos_movil{
        display: block;
    }
    .contenedor_A_bienvenida .datos_auto {
        display: none;
    }
    .contenedor_A_bienvenida .datos_auto_movil_1 {
        display: block;
    }
    .contenedor_A_bienvenida .datos_auto_movil_2 {
        display: block;
    }
    div.der_superior h2.titulos{
        text-align: center;

    }

    div.contenedor_derecho {
        width: 100%;
        position: static;
        height: auto;
        gap: 18px;
        padding: 1rem 1rem 1rem 1rem;
        border-radius: 1rem 1rem 0rem 0rem;
        overflow-y: auto;
    }
    div.der_superior {
        justify-content: flex-start;
        height: auto;
        padding: 0px 0px 0% 0px;
    }
    div.der_inferior {
        height: auto;
        gap: 14px;
        padding: 0% 0px 0px 0px;
        overflow: hidden;
    }

    div.der_inferior.una_sola_carta {
        height: 110px;
        gap: 0px;
        padding: 0% 0px 0px 0px;
    }
    div.der_inferior.una_sola_carta .carta {
        display: flex;
        height: 100px;
        width: 90%;
    }


    h2.titulos_especiales {
        align-self: center;
    }
    p.parrafos {
        text-align: justify;
    }
}