@import url('https://fonts.googleapis.com/css2? family= Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200; 1,300;1,400;1,500;1,600;1,700;1,800;1,900 & display=intercambiar');
@import url('https://fonts.googleapis.com/css2? family= Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100; 1200;1300;1400;1500;1600;1700;1800 & mostrar=intercambiar');

/*   'Barlow Condensed', sans-serif;   */

/*  'Barlow', sans-serif;    */


.formato{ 
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;

    width: 430px;
    height: 932px;

    margin: auto;
    padding: 0%;
}

/****************************************************/

                /*status bar*/ 

header{   
    background-color: #00104E;
    height: 45px;
    width: 430px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); 
    
    display: grid;
    grid-template-columns: 60% 40%;
    text-align: justify;
    padding-bottom: 0rem;
    padding-top: 0,1rem;
}

.hora{
    color: #FFF;

    font-family: 'Barlow', sans-serif;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;

    padding-left: 1rem;
    padding-top: 0,5rem;
}

                /*logo*/

.logo{
    width: 7rem;
    height: 7rem;

    padding-top: 1rem;
}

                /*texto*/

.contenedor-inicio{
    width: 21.3125rem;
    height: 20.25rem;

    border-radius: 1.375rem;
    border: 5px solid #3A93DD;
    background: #FFF;
}

.contenedor{
    border-radius: 1.375rem;
    border: 5px solid #3A93DD;
    background: #FFF;

    width: 20rem;
    height: 14rem;

    display: grid;
    grid-template-columns: auto;
    text-align: center;
    justify-content: center;
}

h1{
    color: #00104E;
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.0475rem;
    margin-bottom: 0.7rem;
}

h2{
    color: #00104E;
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: 0.7rem;

    width: 18.5rem;

    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 1,5rem;
}

.parrafo-inicio{
    color: #00104E;
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    line-height: 115%;
    margin-top: 0.1rem;

    width: 16.5rem;
    height: 8.5rem;

    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
}

.parrafo{
    color: #00104E;
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    line-height: 115%;
    margin-top: 0.1rem;

    width: 16,5rem;
    height: 8rem;
    
    padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 2rem;
}

.parrafo3{
    color: #00104E;
    text-align: center;
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    line-height: 115%;

    width: 18rem;
    height: 8rem;

    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 2rem;
}

.negrita{
    color: #00104E;
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    line-height: 115%;
    font-weight: 600;
}

                /*imagen*/

.img-onb1{
    width: 14rem;
    height: 14rem;
}

.img-onb2{
    width: 17rem;
    height: 17rem;
}

.img-onb3{
    width: 24.5rem;
    height: 16.5rem;
}

.img-onb4{
    width: 26rem;
    height: 15rem;

    padding-top: 3rem;
}

                /*button*/

a{
    text-decoration: none;
}

.flecha{
    width: 10px;
    height: 10px;

    padding-top: 1rem;
}

.linea{
    width: 7.25rem;
    height: 0.5rem;

    margin-top: 2rem;
}

.button{
    width: 16.875rem;
    height: 3.125rem;
    border-radius: 1rem;
    background: #00104E;
    
    color: #FFF;
    text-align: center;
    font-family: 'Barlow', sans-serif; 
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-left: 5rem;
    margin-right: 5rem;
    margin-top: 1rem;
}

.onb{
    margin-top: 2,5rem;
}

.omitir{
    color: #00104E;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

hr{
    width: 6.25rem;
    border: none;
    border-top: 5px solid;
    border-radius: 10px;
    color: #3A93DD;
}