/* ==========================================================================
   TIPOGRAFIES CUSTOM (UOC)
    font-family: 'UOC Serif';
    font-family: 'UOC Sans';
   ========================================================================== */
@font-face {
  font-family: 'UOC Sans';
  src: url('../fonts/UOCSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UOC Sans';
  src: url('../fonts/UOCSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UOC Serif';
  src: url('../fonts/UOCSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UOC Serif';
  src: url('../fonts/UOCSerif-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   VARIABLES GLOBALES DEL TEMA
   ========================================================================== */
:root {
  /* Tipografías (Ara apunten a les fonts carregades) */
  --font-serif: "UOC Serif";
  --font-sans: "UOC Sans";

  /* Layout */
  --layout-max-width: 1440px;
  --layout-padding-x: 64px; 
  
  /* Sistema de Grid de 12 Columnas */
  --grid-columns: 12;
  --grid-gap: 26px;
}

@media (max-width: 1024px) {
  :root {
    --layout-padding-x: 32px;
    --grid-gap: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --layout-padding-x: 20px;
    --grid-columns: 4; 
    --grid-gap: 16px; 
  }
}