:root {
  /* ------------------------------------
     Colors
  ------------------------------------ */

  --color-bg: #f6f6f6;
  --color-text: #000000;
  --color-placeholder: #a6a6a6;

  --color-hover-blue: #0034b7;
  --color-hover-red: #d4000b;
  --color-hover-green: #007e37;
  --color-hover-grey: #a6a6a6;

  /* ------------------------------------
     Typography
  ------------------------------------ */

  --font-sans: "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Times New Roman", Times, serif;

  --fw-sans: 600;
  --fw-serif: 400;

  --fs-sans: 16px;
  --lh-sans: 1;
  --tracking-sans: -0.05em;

  --fs-serif: 17px;
  --lh-serif: 1.08;
  --tracking-serif: -0.01em;


  /* ------------------------------------
     Layout
  ------------------------------------ */

  --page-padding: 8px;
  --grid-gap: 4px;

  --header-spacing: 50px;
  --intro-bottom: 108px;
  --row-gap: 14px;
}

@media (max-width: 1200px) {
  :root {
    --fs-serif: 16px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-padding: 10px;

    /* Tipografía */
    --fs-sans: 15.5px;
    --fs-serif: 16px;
    --lh-serif: 1.12;

    --header-spacing: 24px;
  }
}