/* ============================================== */
/*  LAYOUT & STRUCTURE                            */
/*  Containers, grids, y estructura general       */
/* ============================================== */
html {
  overflow-x: clip;
}

/* ---------------------------------------------- */
/*  CONTAINERS                                    */
/* ---------------------------------------------- */

.container {
  width: min(100% - var(--container-padding) * 2,
      var(--container-max-width));
  margin: 0 auto;
}

/* ---------------------------------------------- */
/*  SECTION SPACING                               */
/* ---------------------------------------------- */

section,
footer {
  overflow-x: clip;
}

.section-padded {
  padding-block: var(--space-3xl);
}

/* ---------------------------------------------- */
/*  BACKGROUND UTILITIES                          */
/* ---------------------------------------------- */

.fondo-comun {
  background-color: var(--color-bg-primary);
}

.fondo-claro {
  background-color: var(--color-bg-secondary);
}

/* ---------------------------------------------- */
/*  ACCESSIBILITY                                 */
/* ---------------------------------------------- */

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