@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap");

:root {
  /* PRIMARIOS */
  --color-primary-dark: #1a1a1a;
  --color-primary-light: #ffffff;
  --color-primary-duoc: #ffb800;

  /* SECUNDARIOS */
  --color-secondary-light: #eeeeee;
  --color-secondary-grey: #666666;
  --color-secondary-dark: #000000;
  --color-secondary-verde: #81db21;

  /* COLOR CARRERA DE DISEÑO / DDHUB */
  --color-principal: #c4d600;
  --color-verde-ddhub: #c2d500;
  --color-negro-ddhub: #101820;
  --color-beige: #ebe6d6;
  --color-warm-gray: #9f958f;
  --color-azul: #2b2577;

  /* TIPOGRAPHY */
  --fonts-heading: "Merriweather";
  --fonts-paragraph: "Lato";

  /* SIZES */
  --size-h1: 3rem;
  --size-h2: 2.1rem;
  --size-h3: 1.5rem;
  --size-h4: 1.24rem;
  --size-h5: 1rem;
  --size-body: 1rem;
  --size-small: 0.813rem;

  /* BUTTONS */
  --button-padding: 12px 24px 12px 24px;
  --button-gap: 10px;
  --button-weight: 700;
  --button-border: solid 2px;
  --button-radius: 100px;
  --button-font: 14px;
  --button-transform: translateY(-15px);
  --button-shadow: 0px 10px 7px;
  --button-opacity: 0.9;
  --button-transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a {
  text-decoration: none;
  font-family: var(--fonts-paragraph);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--fonts-heading);
  font-weight: 700;
}

h1 {
  font-size: var(--size-h1);
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
}

h4 {
  font-size: var(--size-h4);
}

h5 {
  font-size: var(--size-h5);
}

p {
  font-family: var(--fonts-paragraph);
  font-size: var(--size-body);
}

h1 {
  font-size: var(--size-h1);
}

ul,
ol {
  list-style: none;
}

.text-presentacion {
  @media (max-width: 1200px) {
    width: 75% !important;
  }

  @media (max-width: 576px) {
    width: 100% !important;
  }
}