@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --color-peguera-primary: #a71030;
  --color-peguera-electric: #ff2a53;
  --color-peguera-muted: #f9f9f9;

  --garnet: var(--color-peguera-primary);
  --garnet-dark: #7a0b22;
  --accent-electric: var(--color-peguera-electric);
  --bg-body: var(--color-peguera-muted);
  --surface: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --radius-lg: 12px;
  --radius-md: 8px;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  
  /* Tipografia Centralitzada */
  --font-main: 'Open Sans', sans-serif;
  --font-title: var(--font-main);
}

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
  width: 100%; 
  overflow-x: clip; 
}

body { 
  font-family: var(--font-main); 
  color: var(--text-main); 
  background: var(--bg-body); 
  line-height: 1.7; 
  overflow-x: clip; 
  margin: 0; 
  padding: 0; 
}

/* LAYOUT GENERAL */
.portal-section { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 4rem 1.5rem; 
}

.section-header { 
  margin-bottom: 3rem; 
}

.section-title { 
  font-family: var(--font-title); 
  font-size: 2.2rem; 
  color: var(--text-main); 
  display: inline-block; 
  position: relative; 
  padding-bottom: 10px; 
}

.section-title::after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 60px; 
  height: 3px; 
  background: var(--garnet); 
  border-radius: 2px; 
}

.grid-portal { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: stretch; 
  gap: 1.5rem; 
}

/* CLASSES UTILITÀRIES GLOBALS */
.text-primary { color: var(--color-peguera-primary) !important; }
.border-primary { border-color: var(--color-peguera-primary) !important; }
.bg-muted { background-color: var(--color-peguera-muted) !important; }

/* UTILITIES MIGRATS DES DE INLINE */
.mt-1-rem { margin-top: 1rem !important; }
.mt-1-5-rem { margin-top: 1.5rem !important; }
.mb-4-rem { margin-bottom: 4rem !important; }
.fw-bold-spaced { font-weight: 700 !important; letter-spacing: 0.5px !important; }