html{
    /*Codigo para convertir los REM a PX**/
    font-size: 62.5%; /* 1rem = 10px */
    /*Codigo para convertir los REM a EM**/

}

body{
    /* Relacion REM y PX */
    font-size: 16px;
}


:root{
    /*Definiendo mi variables en CSS*/
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #FFC107;
    --secundario: #0097a7;
    --gris: #757575;
}

h1 {
    text-align: center;
    font-size: 3.8rem; /* 38px */
}

span{
    font-size: 1.6rem; /* 16px */
}

.navegacion {
    background-color: var(--oscuro);
    padding: 1rem;
    text-align: center;
}

.navegacion a {
    text-decoration: none;
    color: var(--blanco)
    ;
}


@media (min-width: 768px) {
    .servicios {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    }
}

.servicio {

    
}

.formulario {
    background-color: var(--gris);
    width: min(60rem, 100%);
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1rem;
}

.formulario fieldset {
    border: none;
}

.formulario legend {
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primario);
}

.contenedor-campo{

}

.campo {
    margin-bottom: 2rem;
}

.campo label{
    color: var(--blanco);
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;

}