:root {

    --blanco:#ffffff;

    --negro:#000000;

    --primario: #784d3c;

    --fondo: #2c3235;

    --fuenteparrafos: font-family: 'Open Sans', sans-serif;

    --fuenteheading: font-family: 'PT Sans', sans-serif;

    --verde: #00b341;

}

html {

    font-size: 62,5%;

    box-sizing: border-box; /* sirve por ejemplo si

    una caja tiene un alto de 400 px va a seguir teniendo ese alto sin importar el padding*/

 }

 *, *:before, *:after {

    box-sizing: inherit;/*esto es parte del box si*/

  }

 

body {

    font-size: 1.3rem;

    line-height: 2;

    font-family: 'Open Sans', sans-serif !important;

   

    

}

.contenedor {

    max-width: 80rem;

    width: 90%;

    margin: 0 auto;

    

}

a {

    text-decoration: none;

    font-family: 'Open Sans', sans-serif !important;

}

h1, h2, h3, h4 {

    font-family: 'Open Sans', sans-serif !important;

    color: var(--blanco);

}



h1 {

 font-size: 2.8rem;

}

h2 {

    font-size: 2.2rem;

    text-align: center;



}



h3 {

    font-size: 1.5rem;

    text-align: center;



}



h4 {

    font-size: 1.2rem;



}

h5 {

    font-size: 1.0rem;



}

img {

    max-width: 100%;

}



/* utilidades */

.no-margin {

    margin: 0;

}

.no-padding {

    padding: 0;

}

.centrar-texto {

    text-align: center;

}







@media(min-width:768px){



    .barra {

        

        height: 10rem;

        padding-top: 3rem;

        padding-bottom: 6rem;

      

        color: var(--blanco);

        font-size: 2rem;

    

    }

}

.barra {

    background-color: #2ea3f2;

    height: 2rem;

    padding-top: 1rem;

    padding-bottom: 2rem;

  

    color: var(--blanco);

    font-size: 1.1rem;



}



.barra a {

    color: var(--blanco);

    transition: 1s;



}

.barra a:hover {

    color: #dedbdb;

}

.barra2 {

    height: 2rem;

    padding-top: 2rem;

    padding-bottom: 6rem;

    background-color: var(--blanco);

    margin-bottom: 2rem;

    

}

.barra2__interior {

    display: flex;

    gap: 6rem;

    align-items: center;

}

@media(max-width:768px)

{

    .barra2__interior {

        

        gap: 2rem;

        align-items: center;

    }

    .barra2__interior h2 {

        

        font-size: 2rem;

        gap: 1rem;

    }

}





.barra2__interior img {

    height: 4.5rem;

}

/* formulario*/



.input {

border: 1rem;

padding: 1.2rem;

border-radius: 1rem;

width: 100%;

}



.formulario {

    background-color:rgba(0,0,0,0.3);

    width: min( 60rem, 100%);

    margin: 0 auto;

    padding: 2rem;

}

.legend {

    border-bottom: none;

    color: var(--blanco);

    text-align: center;

}



.campo {

margin-bottom: 1rem;



}

.campocelu {

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 1rem;

}



@media(min-width:768px){

.contenedor-campos {

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 1rem;



}

}



.campo label {

    font-weight: 700;

    display: block;

    color: var(--blanco);



}



.boton {

    width: 100%;

    margin-top: 2rem;

}

.container-form {

    margin-bottom: 4rem;

}

/*titulo*/

.titulo {

    text-align: center;

    margin: 4rem 0 4rem 0;

    font-size: 3rem;

}

.titulo__verde {

    color:var(--verde);

    font-weight: 900;

}

.parrafos {

    background-color:rgba(0,0,0,0.3);

    padding: 1.5rem;

    color: var(--blanco);

}

.flex {

    display: block;

    text-align: center;

    margin-bottom: 10rem;

}



.parrafoscont {

    margin-bottom: 5rem;

}



/* test diagnóstico */

.progress {

 

}

.container {

    

    max-width: 80rem;

    width: 90%;

    margin: 0 auto;

}



/*felicitacioness*/



.felicita {

    

    padding: 2rem;

    margin-bottom: 5rem;

}

.felicita__icon {

    margin-left: 2rem;

    margin-right: 2rem;

}

.felicita h2{

    font-weight: 400;

}



.felicita__excel {

    color:var(--verde);

    font-weight: 700;

}

.form__legend {

    text-align: center;

}

.felicita__form {

    display: block;

    

}



.felicita__form {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    text-align: center;

}



@media(max-width:768px){

    .felicita__form {

        display: block;

    }

}



.felicita__boton {

    display: block;

    text-align: center;

    margin-top: 2rem;

}

.form-check-label {

    font-size: 1.4rem;

}

.col-md-6 {

    padding-left: 0 !important;

}