*{
    --White: hsl(0, 100%, 100%);
    --Purple_100: hsl(275, 100%, 97%);
    --Purple_600: hsl(292, 16%, 49%);
    --Purple_950: hsl(292, 42%, 14%);
    padding: 0;
    margin: 0;
    font-size: 16px;
    box-sizing: border-box;
    font-family:"Work Sans", sans-serif;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: var(--Purple_100);
    display: flex;
    justify-content: center;
    align-items: center;
    .div_fondo{
        width:100vw;
        height: 16.8em;
        background-image: url(./assets/images/background-pattern-desktop.svg);
        background-size: cover;
        background-position: top;
        display: flex;
        position: absolute;
        top: 0;
    }
    .contenedor_principal{
        padding: 0 3.2em;
        width: 47.5em;
        min-height: 44.6em;
        background-color: var(--White);
        border-radius: 1.4em;
        box-shadow: 0.1em 0.1em 2em var(--Purple_600);
        z-index: 1;
        header{
            margin-top: 3em;
            gap: 1.7em;
            display: flex;
            align-items: center;
            div{
                width: 3.4em;
                padding: 1em 0;
                img{
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                }
            }  
            h1{
                font-size: 4.5em;
                font-weight: 700;
            }
        }
        .caja_preguntas{
            .article{
                padding-top: 2.4em ;
                border-bottom: 1px solid var(--Purple_100);
                /* Contiene la imagen y el titulo para asignarlos a cadad esquina mas facil */
                .titulo-img{
                    display: flex;
                    justify-content: space-between;
                    gap: 1em;
                    align-items:start;
                    .h2{
                        padding-bottom: 1.7em;
                        font-size: 1.42em;
                        font-weight: 600;
                        color:var(--Purple_950);
                    }
                    .h2:hover{
                        color: rgb(183, 13, 213);
                    }
                    .caja_img2{
                        width: 2em;
                        cursor: pointer;
                        .img2{
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                        }
                    }
                }
                .caja_oculta{
                    display: none;
                    p{
                        padding-bottom: 1.4em;
                        font-size: 1.25em;
                        line-height: 1.5em;
                        font-weight: 500;
                        color: var(--Purple_600);
                    }
                }
            }
        }
    }
}
@media (max-width: 375px){
    body{
        width: 100%;
        .div_fondo{
            width: 100%;
            display: flex;
            position:fixed;
            left: 0;
            right: 0;
            top: 0;
        }
        .contenedor_principal{
            width: 21em;
            padding: 0 1.5em;
            header{
                gap: 1em;
                div{
                    width: 2.5em;
                }
                h1{
                    
                    font-size: 3em;
                }
            }
            .caja_preguntas{
                .article{
                    .titulo-img{
                        .h2{
                            width: 97%;
                            font-size: 1.2em;
                        }
                        .caja_img2{
                            width: 2.1em;
                            position: absolute;
                            right: 30px;
                        }
                    }
                    .caja_oculta{
                        p{
                            font-size: 1em;
                            text-align: justify;
                            line-height: 1.5em;
                        }
                    }
                }
            }
        }
    }
}