*{
    /* Primarios */
    --Rojo_claro: hsl(0, 100%, 67%);
    --Amarillo_anaranjado: hsl(39, 100%, 56%);
    --Verde_azulado: hsl(166, 100%, 37%);
    --Azul_cobalto: hsl(234, 85%, 45%);

    /* Degradados (Gradients) */
    --Azul_pizarra_claro_fondo: hsl(252, 100%, 67%);
    --Azul_real_claro_fondo: hsl(241, 81%, 54%);
    --Azul_violeta_círculo: rgba(78, 33, 202, 0.553);
    --Azul_persa_círculo: hsla(241, 72%, 46%, 0);

    /* Neutros */
    --Blanco: hsl(0, 0%, 100%);
    --Azul_pálido: hsl(221, 100%, 96%);
    --Lavanda_claro: hsl(241, 100%, 89%);
    --Azul_grisáceo_oscuro: hsl(224, 30%, 27%);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: "Hanken Grotesk", sans-serif;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--Azul_pálido);
    .card-principal{
        width: 36.7em;
        height: 25.6em;
        border-radius: 1.5em;
        display: flex;
        background-color:var(--Blanco);
        .mitad{
            padding: 2em 2.1em;
            width: 50%;
            height: 100%;
        }
        .one{
            text-align: center;
            background-color:var(--Azul_real_claro_fondo);
            border-radius: 1.5em;
            color:var(--Azul_pálido);
            .p1{
                margin-bottom: 1.6em;
                color: var(--Lavanda_claro);
                font-size: 1.2em;
                font-weight: 700;
            }
            .p2-p3{
                margin: auto;
                width: 10em;
                height: 10em;
                border-radius: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                box-shadow: 0px 1px 350px var(--Azul_pálido);
                /* Colores */
                background-color:var(--Azul_violeta_círculo);
                .p2{
                    font-size: 4em;
                    font-weight: 700;
                    color: var(--Azul_pálido);
                }
                .p3{
                    color: var(--Azul_pálido);
                    color: var(--Azul_pizarra_claro_fondo);
                }
            }
            .texto-final{
                .h3-1{
                    margin-top: 0.9em;
                    font-size: 1.5em;
                }
                .p4{
                    padding: 0.8em;
                    text-align: center;
                    font-size: 0.9em;
                    line-height: 1.3em;
                    color: var(--Lavanda_claro);
                }
            }
        }
        .two{
            background-color:var(--Blanco);
            border-radius: 1.5em;
            h3{
                font-size: 1.2em;
                margin-bottom: 1.2em;
            }
            ol{
                display: flex;
                flex-direction: column;
                gap: 1em;
                .lii{
                    padding: 0.66em;
                    display: flex;
                    justify-content: space-between;
                    color: var(--Lavanda_claro);
                    border-radius: 1em;
                    .img-p-tw{
                        display: flex;
                        gap: 0.5em;
                        .textt{
                            font-size: 0.9em;
                            font-weight:700;
                        }
                    }
                    .textt2{
                        font-size: 0.9em;
                        color: var(--Lavanda_claro);
                        font-weight:700;
                        .espan{
                            color:var(--Azul_grisáceo_oscuro);
                            font-size: 0.9em;
                            font-weight:900;
                        }
                    }
                }
            }
        }
        button{
            margin-top: 2.3em;
            padding: 0.7em;
            width: 100%;
            border-radius: 2.6em;
            color:var(--Azul_pálido);
            border: none;
            transition: all 300ms ease;
            background-color: var(--Azul_grisáceo_oscuro);
            cursor: pointer;
        }
        button:hover{
            background-color:  var(--Azul_pizarra_claro_fondo);
            background-color: var(--Azul_real_claro_fondo);
        }
    }
}
@media (max-width:375px){
    body{
        display: block;

        .card-principal{
            width: 100vw;
            height: 100vh;
            flex-direction: column;
            display: flex;
            .mitad{
                width: 100vw;
                padding: 2em;
                margin: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .one{
                height: 40%;
                border-radius:0 0 3em 3em;
                .p1{
                    font-size: 1.6em;
                }
                .p2-p3{
                    padding: 1em;
                    .p2{
                        font-size: 5em;
                    }
                    
                }
                .texto-final{
                    .h3-1{
                        font-size: 1.6em;
                    }
                    .p4{
                        font-size: 1.1em;
                        line-height: 1.5em;
                    }
                }
            }
            .two{
                height: 60%;
                h3{
                    font-size: 1.5em;
                }
                ol{
                    .lii{
                        padding: 1.5em;
                        .img-p-tw{
                            .textt{
                                font-size: 1.3em;
                            }
                        }
                    }
                }
            }
            button{
                padding: 1.3em;
                margin-bottom: 2em;
                font-size: 1.2em;
            }
        }
    }