/* 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-negro);
  font-family: "Ubuntu", sans-serif;
  font-optical-sizing: auto;
  position: relative;
}
html h1 {
  font-size: 3.4rem;
}

html h2 {
  font-size: 3rem;
}

html h3 {
  font-size: 2.4rem;
}

html h4 {
  font-size: 1.4rem;
}

p {
  font-size: 1.6rem;
  line-height: 1.5;
}

img {
  max-width: 100%;
}
figure {
  margin: 0;
  padding: 0;
}
video{
  width: 100%;
  height:auto;
  object-fit: cover;

}

/**COLORES**/
:root {
  --color-negro: #252a34;
  --color-gris: #e0e0e0;
  --color-amarillo-texto: #efaa39;
  --color-amarillo: #f9af16;
  --color-blanco: #ffffff;
}

/**GLOBALES**/

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  width: 90%;
}
.resaltar{
  color: var(--color-amarillo-texto);
}
/**BOTONES**/
.boton {
  display: block;
  padding: 1.2rem 3rem;
  background-color: var(--color-amarillo);
  color: var(--color-negro);
  font-size: 1.6rem;
  text-decoration: none;
  border-radius: 2rem;
  font-weight: 500;
  border: none;
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
}

.boton-plomo {
  background-color: var(--color-gris);
  color: var(--color-negro);
  padding: 1.2rem 4rem;
  cursor: pointer;
  text-align: center;
 }
 .boton-negro {
  background-color: var(--color-negro);
  color: var(--color-blanco);
  padding: 1.2rem 4rem;
  cursor: pointer;
  text-align: center;
  margin-top: 3rem;
 }
.boton__contenido {
  display: flex;
  gap: .8rem;
  justify-content: center;
}
.boton__contenido img {
  width: 2rem;
  max-height: 2rem;
}