/* ============================================================
   DCS S.A. — Base Styles v2 (Enterprise)
   ============================================================ */

body {
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-white);
}

/* ── TIPOGRAFÍA ── */

h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.015em;
}

h4 {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

p {
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

a { transition: color var(--transition-fast); }
strong { font-weight: var(--font-weight-bold); }

/* ── CONTAINER ── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow { max-width: 780px; }
.container--wide   { max-width: 1400px; }

/* ── SECCIONES ── */

.section            { padding-block: var(--section-padding-v); }
.section--sm        { padding-block: var(--section-padding-v-sm); }
.section--dark      { background-color: var(--color-dark-2); color: var(--color-text-on-dark); }
.section--dark p    { color: var(--color-text-on-dark-2); }
.section--light     { background-color: var(--color-bg-light); }
.section--lighter   { background-color: var(--color-bg-lighter); }

/* ── UTILIDADES ── */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-primary   { color: var(--color-primary); }
.text-dark      { color: var(--color-dark); }
.text-muted     { color: var(--color-text-muted); }
.text-white     { color: var(--color-white); }
.text-secondary { color: var(--color-text-secondary); }

.text-sm    { font-size: var(--text-small); }
.text-lg    { font-size: var(--text-body-lg); }
.text-label { font-size: var(--text-label); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }

.font-bold   { font-weight: var(--font-weight-bold); }
.font-medium { font-weight: var(--font-weight-medium); }

.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); } .mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── RESPONSIVE TYPE SCALE ── */

@media (max-width: 1200px) {
  :root {
    --text-h1: 56px;
    --text-h2: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --text-h1: 40px;
    --text-h2: 30px;
    --text-h3: 24px;
    --text-body: 16px;
    --section-padding-v: 80px;
    --section-padding-v-sm: 56px;
    --container-padding: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-h1: 32px;
    --text-h2: 26px;
    --text-h3: 20px;
    --text-body: 15px;
    --section-padding-v: 64px;
    --container-padding: 16px;
  }
}