/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  font-size: 62.5%;
  /** Reset para REMS - 62.5% = 10px de 16px **/
  scroll-behavior: smooth;
}

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

body {
  /**<weight>: Use a value from 200 to 900**/
  color: var(--color-plomo);
  font-family: "Flexo", sans-serif;
  font-optical-sizing: auto;
  position: relative;
}

html h1 {
  font-size: 4rem;
  line-height: 1.5;
}

html h2 {
  font-size: 3rem;
  line-height: 1.5;
}

html h3 {
  font-size: 2.4rem;
  line-height: 1.5;
}

html h4 {
  font-size: 1.4rem;
}
html p{
  line-height: 1.3;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-plomo-parrafo);
}
figure{
  margin: 0;
  padding: 0;
}

/**COLORES**/
:root {
  --color-rojo: #ff0030;
  --color-plomo: #5a5a5a;
  --color-plomo-parrafo: #727376;
  --color-blanco: #ffffff;
}

/**------------------GLOBALES---------------**/
.contenedor {
  max-width: 1250px;
  margin: 0 auto;
  width: 90%;
}
/** CONTENEDOR PADRE DE SIDEBAR , MAIN-HOME Y ASIDE**/
.contenedor-paginas-internas {
  display: grid;
  gap: 30px;
}
/** CONTENEDOR PADRE DE MAIN-HOME Y ASIDE**/
.contenido-home {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: calc(116.50px - 30px);
  padding: 30px 0 0px 0px;
}

/** CONTENIDO PRINCIPAL  SIN ASIDE**/
.contenido-interno-main {
  padding: 30px 0 0 0px;
  margin-top: calc(116.50px - 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

@media (min-width: 768px) {
  /** CONTENEDOR PADRE DE SIDEBAR , MAIN-HOME Y ASIDE**/
  .contenedor-paginas-internas {
    display: grid;
    grid-template-columns: 2fr 8fr;
  }

  /** CONTENIDO PRINCIPAL SIN ASIDE**/
  .contenido-interno-main {
    margin-top: 83.50px;
  }
}
@media (min-width: 1024px) {
  /** CONTENEDOR PADRE DE MAIN-HOME Y ASIDE**/
  .contenido-home {
    display: grid;
    grid-template-columns: 7.2fr 2.8fr;
    margin-top: 83.50px;
  }
}

/**UTILIDADES**/

img {
  max-width: 100%;
}


/**FOOTER**/
footer{
  text-align: center;
  position: relative;
  height:100%;
  min-height: 4rem;
}
footer p{
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;

  bottom: 0;
  right: 0;
  left: 0;
  padding: 1.5rem 1rem;
}
footer a{
  color: var(--color-rojo);
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
}
@media (min-width: 1024px) {
  footer p{
    margin: 0;
    font-size: 1.4rem;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 1.5rem 1rem;
  }
}