html {
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model */
    background-color: black;
    color: white;
    font-size: 10px;
}

*, *:before, *:after {
    box-sizing: inherit; /* Hack para Box Model */
  }

body {
    font-size: 16px;
    font-family: 'Satoshi', sans-serif;
}

/*Global */
h1 {
    font-size: 3.8rem;
}


h3 {
    font-size: 1.8rem;
}

/* Navegación */
.nav-principal {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    margin-bottom: 7rem;
}

.nav-principal a {
    font-size: 1.9rem;
    text-decoration: none;
    color: grey;
    transition: 0.3s;
}

.nav-principal a:hover{
    color: white;
    transition: 0.3s;
}

svg {
    height: 2.5rem;
    stroke: grey;
    transition: 0.4s;
}

svg:hover {
    stroke: white;
    transition: 0.4s;
}

/* Secciones */
.cont-principal {
    display: block;
    max-width: 650px;
    width: 100%;
    margin: auto;
    line-height: 3rem;
}

.cont-principal h1 {
    font-size: 4rem;
    padding-bottom: 1.8rem;
}

.cont-p {
    margin-bottom: 18px;
    color: rgb(187, 187, 187);
    font-size: 17px;
}

.margin-media {
    margin-top: 5rem;
}

.span-cont {
    color: rgb(187, 187, 187);
    display: block;
    margin: auto;
}

.cont-secundario-redes {
    display: flex;
    align-items: center;
    gap: 3rem;
}


.cont-secundario-redes a {
    color: rgb(187, 187, 187);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
    text-decoration: none;
}

.cont-secundario-redes a:hover {
    color: white;
    transition: 0.4s;
}