/* Custom properties */
:root {
  --black: #121212;
  --gray: #2d2d2d;
  --white: #ffffff;
  --orange: #ff5e00;

  --headingFont: "PT Sans", sans-serif;
  --paragraphFont: "Open Sans", sans-serif;

  --primaryColor: #784D3C;
  --whiteColor: #FFFFFF;
  --blackColor: #000000;
  --grayColor: #E1E1E1;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  /* 1rem = 10px */
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: "Inter", sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  background-color: #000000;
}

/*** GLOBALES ***/
.contenedor {
  max-width: 120rem;
  width: 90%;
  margin: 0 auto;
  /* width: min(90%, 120rem); */
}

a {
  text-decoration: none;
}

h1 {
  font-size: 4.8rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3.2rem;
}

h4 {
  font-size: 2.8rem;
}

img {
  max-width: 100%;
}

p {
  font-size: 2.5rem;
}

/*** UTILIDADES ***/
.no-margin {
  margin: 0;
}

.no-padding {
  padding: 0;
}

.centrar-texto {
  text-align: center;
}

/*** BOTONES ***/
.boton {
  display: block;
  font-family: var(--headingFont);
  color: var(--whiteColor);
  text-align: center;
  padding: .5rem 3rem;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  margin-bottom: 2rem;
}

.boton:hover {
  cursor: pointer;
}

@media (min-width: 768px) {
  .boton {
    display: inline-block;
    width: auto;
  }
}

.boton--primario {
  background-color: var(--blackColor);
}

.boton--secundario {
  background-color: var(--primaryColor);
}

main .site {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.site > img {
  margin-bottom: 5rem;
}

.site-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.site-body img {
  width: 10rem;
}

.site-body-details p {
  text-align: center;
}